Nome do ImageView

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Elementos de imagem focáveis devem fornecer um nome acessível significativo disponível para tecnologias assistivas, como TalkBack e Voice Access.

Impacto

As pessoas que usam o TalkBack serão as mais afetadas pelos problemas encontrados. Se um ImageView fornece informações aos usuários com deficiência visual e não oferece um nome, o TalkBack não anunciará nada, e essa informação ficará ausente para usuários que utilizam o TalkBack.

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

Confirmação

Ative o TalkBack
Realize um gesto de "toque para explorar" no controle
Para imagens informativas:
- Acessível: Recebe foco e anuncia uma descrição significativa.
  
  Para imagens decorativas:
- Acessível: Não recebe foco individualmente. Dentro de um grupo é aceito.

Como Corrigir

Android Nativo

ImageView image = .......;
image.setContentDescription("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted.");

React Native

important

O React Native não adiciona automaticamente o papel de acessibilidade a muitos elementos. Certifique-se de adicionar accessibilityRole="image" a todas as imagens que você deseja que estejam disponíveis para tecnologia assistiva. A extensão VSCode axe Accessibility Linter e o axe DevTools Linter agora incluem suporte a React Native, o que pode ajudar a detectar erros como esses antes dos testes de interface do usuário.

Se a imagem representa informações que o usuário precisa, forneça uma descrição accessibilityLabel para transmitir essas informações e configure a propriedade acessível como verdadeira:

<Image
    ...
    accessible={true}
    accessibilityLabel="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Se a imagem não representa informações únicas, como uma imagem de fundo ou decorativa, torne-a não 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.

Opção 1: Se a imagem representa informações que o usuário precisa, forneça uma descrição SemanticProperties.Description para transmitir essas informações.

<Image
    ...
    SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Opção 2: Se a imagem representa informações que o usuário precisa, forneça um Label abaixo do Image elemento para transmitir essas informações.

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

    <Label
         x:Name="imageLabel"
         Text="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
         ...
    />
</StackLayout>