Nome da ImageView

O que Verificamos

Elementos de imagem focalizáveis devem ter um nome acessível para que o VoiceOver possa anunciar informações significativas sobre a imagem. Imagens que transmitem informações precisam de um rótulo de acessibilidade; imagens meramente decorativas não devem receber foco de forma alguma.

Em Resumo

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

Exemplo de Falha ❌

name = {nenhum}

VoiceOver anuncia apenas a função
"Imagem"

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

Exemplo de Sucesso ✅

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

VoiceOver anuncia the name and role

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

Impacto para os Usuários

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

Imagens decorativas que recebem foco de forma incorreta podem criar uma experiência perturbadora, criando ruído durante a navegação sem comunicar nada significativo.

Imagens informativas devem usar accessibilityLabel para fornecer o contexto e os detalhes necessários através do VoiceOver.

Confirmar Problema de Nome de ImageView

1. Ative o VoiceOver
2. Deslize para a direita para navegar até a imagem ou arraste seu dedo pela tela para explorar pelo toque
3. Um dos seguintes ocorrerá:
   • Para imagens informativas:
     • Inacessível: O elemento recebe foco, mas o VoiceOver não anuncia nada significativo, ou anuncia apenas o nome do arquivo
     • Acessível: Recebe foco e anuncia uma descrição significativa
   • Para imagens decorativas:
     • Inacessível: A imagem recebe foco individualmente e o VoiceOver não anuncia nada útil
     • Acessível: Não recebe foco individualmente (dentro de um grupo é aceitável)

Corrigir Problemas

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

UIKit

Um problema encontrado por esta regra é causado por não usar accessibilityLabel, ou por marcar incorretamente uma imagem como um elemento de acessibilidade.

No storyboard:

1. Navegue até a imagem
2. Confirme que o Painel de Inspetores está visível
3. Selecione o Inspetor de Identidade
4. Se a imagem transmite informações que o usuário precisa, em "Acessibilidade", escreva a informação no campo de texto "Rótulo"
5. Se a imagem não transmite informações que o usuário precisa, em "Acessibilidade", desmarque a caixa de seleção "Ativado"

No código:

Se a imagem transmite informações que o usuário precisa, dê a ela um accessibilityLabel descritivo para transmitir essa informação.

image.accessibilityLabel = "Promotional banner: Ask your travel agent about our latest deals!"

Para imagens decorativas que não transmitem significado, marque isAccessibilityElement como 'falso' para que não sejam focalizáveis.

image.isAccessibilityElement = false

SwiftUI

Se uma imagem transmite informações que o usuário precisa, defina .accessibility(label: Text("<meaningful description>")) na imagem. Alternativamente, use o inicializador Image, que inclui o parâmetro de rótulo.

Image("format_info", label: Text("Promotional banner: Ask your travel agent about our latest deals!"))

Se a imagem não transmite informações que o usuário precisa - quando é decorativa, ou um fundo, por exemplo - esconda-a da tecnologia assistiva.

Image("background_blue")
    .accessibility(hidden: true)

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 o accessibilityLabel.

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

Marque imagens decorativas que não transmitem significado como accessible={false} para que não sejam focalizáveis.

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

.NET MAUI

Imagens que não receberam uma descrição de conteúdo no .NET MAUI são automaticamente marcadas como não importantes para acessibilidade. Isso significa que qualquer imagem que não tenha recebido intencionalmente uma descrição é considerada no axe DevTools Mobile como uma imagem decorativa, quando talvez não tenha sido sua intenção ser uma imagem decorativa. Certifique-se de que todas as imagens que transmitem informações ou contexto sejam fornecidas com uma descrição apropriada.

Se a imagem fornece ao usuário informações, defina um SemanticProperties.Description descritivo para comunicar essa informação.

<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 inteiramente 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 Nome ImageView 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 usuários do VoiceOver, e eles não recebem nenhuma informação sobre o que a imagem comunica. Ignore esta regra somente quando você tiver verificado que a imagem é realmente decorativa e não recebe foco independente. Saiba mais sobre ignorando regras.

Recursos

Páginas de Cursos 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 na 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