Imagem Tem Rótulo de Acessibilidade
ID da Regra: image-has-accessibility-label
Todas as imagens devem ter texto alternativo para transmitir seu propósito e significado aos usuários de leitores de tela.
Por Que Isso É Importante
Os leitores de tela, por padrão, não têm como traduzir uma imagem em palavras. Versões mais recentes do VoiceOver e TalkBack possuem funcionalidades avançadas que tentam fornecer texto para as imagens, mas nem sempre são precisas. Como resultado, é necessário que as imagens tenham um texto alternativo breve e descritivo para que os usuários de leitores de tela compreendam claramente o conteúdo e o propósito da imagem.
Se você não pode ver, todos os tipos de informação visual, como imagens, são completamente inúteis, a menos que uma alternativa em texto digital seja fornecida para que os leitores de tela possam converter esse texto em som ou braille. O mesmo é verdade, em diferentes graus, para pessoas com baixa visão ou daltonismo.
Como Corrigir o Problema
Certifique-se de que todos os Image componentes com uma propriedade accessible definida como verdadeira também incluam uma propriedade accessibilityLabel . Além disso, certifique-se de que todos os Image componentes com uma propriedade accessibilityLabel também tenham a propriedade accessible definida como verdadeira para estar disponível para leitores de tela.
Exemplos Válidos
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible="true"
accessibilityLabel="A small fawn pug"
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={false}
/><Image
source={require("pug.jpg")}
style={styles.image}
/>Exemplos Inválidos
O Image componente tem uma propriedade accessible , mas não tem a propriedade accessibilityLabel .
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>O Image componente tem uma propriedade accessibilityLabel , mas não tem a propriedade accessible .
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>O Image componente com uma propriedade accessible não deve ter uma propriedade accessibilityLabelvazia.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>