Afbeelding Heeft Toegankelijkheidslabel
Regel die vereist dat React Native Image-componenten alternatieve tekst hebben voor schermlezergebruikers
Regel-ID: afbeelding-heeft-toegankelijkheidslabel
Alle afbeeldingen moeten alternatieve tekst hebben om hun doel en betekenis over te brengen aan schermlezersgebruikers.
Waarom Het Belangrijk Is
Schermlezers hebben standaard geen manier om een afbeelding in woorden om te zetten. Nieuwere versies van VoiceOver en TalkBack hebben geavanceerde functies die proberen tekst voor afbeeldingen te bieden, maar dat is niet altijd nauwkeurig. Daarom is het noodzakelijk dat afbeeldingen korte, beschrijvende alt-tekst hebben, zodat schermlezersgebruikers duidelijk de inhoud en het doel van de afbeelding begrijpen.
Als je niet kunt zien, is alle visuele informatie, zoals afbeeldingen, volkomen nutteloos tenzij een digitale tekstalternatief wordt geboden, zodat schermlezers die tekst kunnen omzetten in geluid of braille. Hetzelfde geldt in verschillende mate voor mensen met slechtziendheid of kleurenblindheid.
Hoe Het Probleem Op Te Lossen
Zorg ervoor dat alle Image-componenten met een accessible-prop ingesteld op true ook een accessibilityLabel-prop bevatten. Zorg er daarnaast voor dat alle Image-componenten met een accessibilityLabel-prop ook de accessible-prop op true hebben ingesteld om beschikbaar te zijn voor schermlezers.
Voorbeelden van Geslaagde Tests
<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}
/>Voorbeelden van Mislukte Tests
De Image-component heeft een accessible-prop maar geen accessibilityLabel-prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>De Image-component heeft een accessibilityLabel-prop maar geen accessible-prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>De Image-component met een accessible-prop moet geen lege accessibilityLabel hebben.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>