Image Has Accessibility Label
Rule ID: image-has-accessibility-label
All images must have alternate text to convey their purpose and meaning to screen reader users.
Why It Matters
Screen readers don't have a way of translating an image into words by default. Newer versions of VoiceOver and TalkBack have advanced features that attempt to provide text for images, but it is not always accurate. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.
If you can't see, all types of visual information, such as images, are completely useless unless a digital text alternative is provided so that screen readers can convert that text into either sound or braille. The same is true in varying degrees for people with low vision or color-blindness.
How to Fix the Problem
Ensure all Image components with an accessible prop set to true also include an accessibilityLabel prop. Additionally, ensure all Image components with an accessibilityLabel prop also have the accessible prop set to true in order to be available to screen readers.
Passing Examples
<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}
/>Failing Examples
The Image component has an accessible prop but no accessibilityLabel prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
/><Image
source={require("pug.jpg")}
style={styles.image}
accessible={true}
/>The Image component has an accessibilityLabel prop but no accessible prop.
<Image
source={require("pug.jpg")}
style={styles.image}
accessibilityLabel="A small fawn pug"
/>The Image component with an accessible prop should not have an empty accessibilityLabel.
<Image
source={require("pug.jpg")}
style={styles.image}
accessible
accessibilityLabel=""
/>