Nome da ImageView
Elementos de imagem focáveis devem fornecer um nome acessível significativo disponível para tecnologias assistivas, como VoiceOver e Controle de Voz.
Impacto
As pessoas que usam o VoiceOver são as mais impactadas. Imagens informativas devem ter seu contexto, informação ou propósito lido quando focadas pelo VoiceOver.
Confirmação
- Ative o VoiceOver
- Tente focar na imagem
- Uma das seguintes situações ocorrerá:
- Inacessível: A imagem é focável, mas não anuncia um nome no VoiceOver.
- Acessível: A imagem não é focável porque não apresenta informações únicas.
- Acessível: A imagem é focável e possui um nome.
Como Resolver
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:
- Navegue até a imagem
- Confirme que o Painel de Inspetores está visível
- Selecione o Inspetor de Identidade
- Se a imagem apresenta informações das quais o usuário precisa, em "Acessibilidade", escreva as informações no campo de texto "Rótulo".
- Se a imagem não apresenta informações das quais o usuário precisa, em "Acessibilidade", desmarque a caixa de seleção "Ativado".
No código:
Se a imagem apresenta informações das quais o usuário precisa, dê a ela um accessibilityLabel descritivo para transmitir essas informações:
image.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 apresenta informações das quais o usuário precisa, como uma imagem de fundo ou decorativa, torne-a não focável:
image.isAccessibilityElement = falseEm aplicativos UIKit, uma imagem sem um accessibilityLabel não é focável com tecnologia assistiva por padrão.
As propriedades que usamos para verificar a focabilidade da Apple podem ser imprecisas quando um accessibilityIdentifier é definido na imagem. Devido a este comportamento inesperado, os resultados para problemas de Nome de ImageView em aplicativos UIKit serão relatados como Necessário Revisão. Um relatório de bug foi enviado para a Apple.
SwiftUI
Se uma imagem fornece informações das quais o usuário precisa, você pode definir um .accessibility(label: Text("Accessibility Label Here")) modificador de visão na imagem, ou pode utilizar o inicializador de Imagem, que inclui o parâmetro de rótulo.
Image("format_info", label: 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."))
Se a imagem não apresenta informações que o usuário possa precisar, como uma imagem de fundo ou decorativa, oculte-a com o modificador de visão abaixo:
Image("background_blue")
.accessibility(hidden: true)React Native
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 disponibilizar para tecnologia assistiva. A extensão axe Accessibility Linter VSCode e axe DevTools Linter agora incluem suporte para React Native, o que pode ajudá-lo a detectar falhas como estas antes dos testes de interface do usuário.
Se a imagem apresenta informações das quais o usuário precisa, dê a ela um accessibilityLabel descritivo para transmitir essas informações e defina 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 apresenta informações das quais o usuário precisa, como uma imagem de fundo ou decorativa, torne-a não focável:
<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.
Opção 1: Se a imagem apresenta informações das quais o usuário precisa, dê a ela um SemanticProperties.Description descritivo 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 apresenta informações das quais 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>