Bild hat Barrierefreiheitslabel
Regel, die verlangt, dass React Native Image-Komponenten alternativen Text für Screenreader-Benutzer haben
Regel-ID: image-has-accessibility-label
Alle Bilder müssen alternativen Text haben, um ihren Zweck und ihre Bedeutung für Screenreader-Benutzer zu vermitteln.
Warum es wichtig ist
Screenreader können standardmäßig ein Bild nicht in Worte übersetzen. Neuere Versionen von VoiceOver und TalkBack haben erweiterte Funktionen, die versuchen, Text für Bilder bereitzustellen, aber sie sind nicht immer genau. Daher ist es notwendig, dass Bilder kurzen, beschreibenden Alt-Text haben, damit Screenreader-Benutzer den Inhalt und Zweck des Bildes klar verstehen.
Wenn Sie nicht sehen können, sind alle Arten von visuellen Informationen, wie Bilder, völlig nutzlos, es sei denn, es wird eine digitale Textalternative bereitgestellt, damit Screenreader diesen Text in entweder Ton oder Braille umwandeln können. Gleiches gilt in unterschiedlichem Maße für Personen mit Sehbehinderungen oder Farbenblindheit.
Wie man das Problem behebt
Stellen Sie sicher, dass alle Image-Komponenten mit einem accessible-Prop auf true gesetzt auch ein accessibilityLabel-Prop enthalten. Zusätzlich stellen Sie sicher, dass alle Image-Komponenten mit einem accessibilityLabel-Prop das accessible-Prop ebenfalls auf true gesetzt haben, um für Screenreader zur Verfügung zu stehen.
Erfolgreiche Beispiele
<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}
/>Fehlgeschlagene Beispiele
Die Image-Komponente hat ein accessible-Prop, aber kein accessibilityLabel-Prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Die Image-Komponente hat ein accessibilityLabel-Prop, aber kein accessible-Prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Die Image-Komponente mit einem accessible-Prop sollte kein leeres accessibilityLabel haben.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>