Imagem Tem Rótulo de Acessibilidade
Regra que exige que componentes de imagem do React Native tenham texto alternativo para usuários de leitores de tela
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 componentes Image com uma prop accessible definida como verdadeira também incluam uma prop accessibilityLabel. Além disso, certifique-se de que todos os componentes Image com uma prop accessibilityLabel também tenham a prop accessible definida como verdadeira para estarem disponíveis 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 componente Image possui uma prop accessible, mas não possui uma prop accessibilityLabel.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>O componente Image possui uma prop accessibilityLabel, mas não possui uma prop accessible.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>O componente Image com uma prop accessible não deve ter um accessibilityLabel vazio.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>