Afbeelding Heeft Toegankelijkheidslabel
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 eigenschap ingesteld op true ook een accessibilityLabel eigenschap bevatten. Zorg er bovendien voor dat alle Image componenten met een accessibilityLabel eigenschap ook de accessible eigenschap hebben ingesteld op true 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 eigenschap maar geen accessibilityLabel eigenschap.
<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 eigenschap maar geen accessible eigenschap.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>De Image component met een accessible eigenschap mag geen lege accessibilityLabel.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>