Nome do ImageView

O Que Verificamos

Elementos de imagem com foco devem ter um nome acessível para que o TalkBack possa anunciar informações significativas sobre a imagem. Imagens que transmitem informações precisam de uma descrição de conteúdo; imagens puramente decorativas não devem receber foco de forma alguma.

Resumo

• Esta regra tem um impacto crítico para os usuários
• Imagens informativas devem ter uma contentDescription que descreva precisamente o que a imagem transmite
• Imagens decorativas não devem receber foco individualmente — esconda-as da tecnologia assistiva
• Evite descrições vagas como "imagem" ou "ícone" — descreva o significado ou propósito da imagem
• O TalkBack lê a contentDescription em voz alta; se estiver ausente, a imagem fica silenciosa para os usuários de leitores de tela

Exemplo de Falha ❌

name = {none}

TalkBack anuncia apenas o papel
"Imagem"

O usuário não recebe a informação transmitida pela imagem

Exemplo Bem-sucedido ✅

name = "Horizonte do centro da cidade ao pôr do sol"

TalkBack anuncia the name and role

O usuário é informado sobre o conteúdo da imagem

Impacto para os Usuários

Pessoas que utilizam o TalkBack são as mais afetadas pelos problemas encontrados por esta regra. Quando uma ImageView transmite informações visualmente mas não tem um nome acessível, o TalkBack não anuncia nada. Usuários que dependem de leitores de tela perderão completamente essa informação.

Imagens decorativas que incorretamente recebem foco podem criar uma experiência disruptiva, gerando ruído durante a navegação sem comunicar nada significativo.

Imagens informativas devem usar contentDescription para fornecer qualquer contexto e detalhes necessários através do TalkBack.

Confirmar Problema de Nome do ImageView

1. Ative o TalkBack
2. Realize um gesto de "toque para explorar" na imagem
3. Uma das seguintes situações ocorrerá:
   • Para imagens informativas:
     • Inacessível: O elemento recebe foco mas o TalkBack não anuncia nada significativo, ou anuncia apenas um nome de arquivo
     • Acessível: Recebe foco e anuncia uma descrição significativa
   • Para imagens decorativas:
     • Inacessível: A imagem recebe foco individualmente e o TalkBack não anuncia nada útil
     • Acessível: Não recebe foco individualmente (dentro de um grupo é aceito)

Corrigir Problemas

Para resolver problemas de Nome do ImageView, forneça uma contentDescription para imagens que transmitem informações, e remova o foco de imagens puramente decorativas. A descrição deve transmitir a mesma informação que um usuário com visão obtém da imagem. Como uma prática recomendada, descreva o significado da imagem no contexto, não apenas sua aparência visual.

XML

Para imagens informativas, defina contentDescription diretamente no seu layout.

  <ImageView
      android:id="@+id/promo_banner"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:contentDescription="Promotional banner: Ask your travel agent about our latest deals!"
      android:src="@drawable/promo_banner" />

Para imagens decorativas, defina importantForAccessibility="no" para escondê-las do TalkBack.

  <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:importantForAccessibility="no"
      android:src="@drawable/background" />

Para associação programática, use setContentDescription no código:

  ImageView image = findViewById(R.id.promo_banner);
  image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

Compose

Para imagens informativas, defina uma contentDescription descritiva em Image.

  Image(
      painter = painterResource(id = R.drawable.promo_banner),
      contentDescription = "Promotional banner: Ask your travel agent about our latest deals!"
  )

Para decorativas, defina a contentDescription em Image como null para escondê-las do TalkBack.

  Image(
      painter = painterResource(id = R.drawable.background),
      contentDescription = null
  )

Android Nativo

Defina uma contentDescription em imagens informativas para descrever seu propósito.

ImageView image = .......;
image.setContentDescription("Promotional banner: Ask your travel agent about our latest deals!");

React Native

Se uma imagem transmite informações que o usuário precisa, marque-a como accessible={true} e forneça um valor descritivo para a accessibilityLabel.

<Image
    ...
    accessible={true}
    accessibilityRole="image"
    accessibilityLabel="Promotional banner: Ask your travel agent about our latest deals!"
/>

Se a imagem é decorativa e não transmite informações únicas, marque-a como accessible={false} para que não seja focável.

<Image
    ...
    accessible={false}
/>

.NET MAUI

Imagens que não recebem uma descrição de conteúdo em .NET MAUI são automaticamente marcadas como não importantes para acessibilidade. Isso significa que qualquer imagem que não receba intencionalmente uma descrição passa pelo axe DevTools Mobile como uma imagem decorativa, mesmo que talvez não tenha sido planejada para ser uma imagem decorativa. Assegure-se de que todas as imagens que transmitam informações ou contexto recebam uma descrição apropriada.

Se a imagem transmite informações, defina uma SemanticProperties.Description descritiva para comunicar essas informações.

<Image
    ...
    SemanticProperties.Description="Promotional banner: Ask your travel agent about our latest deals!"
/> 

Alternativamente, forneça um elemento Label visível abaixo do elemento Image para transmitir essa informação.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="imageLabel"
         Text="Promotional banner: Ask your travel agent about our latest deals!"
         ...
    />
</StackLayout>

Flutter

Envolva imagens significativas em um elemento Semantics, com image: true e uma label descritiva para que o leitor de tela possa anunciar o que a imagem transmite.

  // Failing — image has no accessible name
  Semantics(
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

  // Passing — descriptive label provided
  Semantics(
    label: 'Deque company logo',
    image: true,
    child: Image.asset('assets/company_logo.png'),
  )

Para imagens decorativas que não transmitem significado, exclua-as completamente da árvore de acessibilidade para que os leitores de tela as ignorem:

ExcludeSemantics(
    child: Image.asset('assets/decorative_divider.png'),
)

Posso Ignorar Esta Regra?

O ImageView Name tem um Impacto crítico para os usuários, e recomendamos fortemente corrigir todos os problemas encontrados. Uma imagem informativa sem um nome acessível é totalmente invisível para os usuários do TalkBack, e eles não recebem nenhuma informação sobre o que a imagem comunica. Ignore esta regra apenas quando você tiver verificado que a imagem é realmente decorativa e não recebe foco independente. Saiba mais sobre ignorando regras.

Recursos

Páginas de Curso da Deque University

• 1.1.1 Conteúdo não textual (A)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0, Recomendação W3C
  • Critério de Sucesso 1.1.1 - Conteúdo não textual
• Documentos de Compreensão do WCAG 2.0
  • Compreensão 1.1.1 A - Conteúdo não textual