Bild hat Barrierefreiheitslabel
Regel-ID: image-has-accessibility-label
Alle Bilder müssen über einen Alternativtext verfügen, um den Benutzern von Bildschirmleseprogrammen ihren Zweck und ihre Bedeutung zu vermitteln.
Warum es wichtig ist
Bildschirmleseprogramme verfügen standardmäßig nicht über die Möglichkeit, ein Bild in Worte zu übersetzen. Neuere Versionen von VoiceOver und TalkBack verfügen über erweiterte Funktionen, die versuchen, Text für Bilder bereitzustellen, was jedoch nicht immer präzise ist. Daher ist es notwendig, dass Bilder einen kurzen, beschreibenden Alternativtext haben, damit Benutzer von Bildschirmleseprogrammen Inhalt und Zweck des Bildes klar verstehen.
Wenn Sie nicht sehen können, sind alle Arten visueller Informationen, etwa Bilder, völlig nutzlos, sofern nicht eine digitale Textalternative bereitgestellt wird, sodass Bildschirmleseprogramme den Text entweder in Ton oder in Blindenschrift umwandeln können. Das Gleiche gilt in unterschiedlichem Maße für Menschen mit Sehbehinderung oder Farbenblindheit.
So beheben Sie das Problem
Stellen Sie sicher, dass alle Image Komponenten mit einer auf „true“ gesetzten accessible Eigenschaft auch eine accessibilityLabel Eigenschaft enthalten. Stellen Sie außerdem sicher, dass bei allen Image Komponenten mit einer accessibilityLabel Eigenschaft auch die accessible Eigenschaft auf „true“ gesetzt ist, damit sie für Bildschirmleseprogramme verfügbar sind.
Bestandene 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}
/>Nicht bestandene Beispiele
Die Image Komponente hat eine accessible Eigenschaft, aber keine accessibilityLabel Eigenschaft.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>Die Image Komponente hat eine accessibilityLabel Eigenschaft, aber keine accessible Eigenschaft.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>Die Image Komponente mit einer accessible Eigenschaft sollte kein leeres accessibilityLabel haben.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>