ImageView Name
Focusable image elements should provide a meaningful accessible name available for assistive technologies such as TalkBack and Voice Access.
Impact
People that use TalkBack will be the most impacted by issues found. If an ImageView provides information to users with vision and doesn't provide a name, TalkBack will not announce anything, and that information is missing for user experiences with TalkBack.
Informative images should utilize contentDescription to provide any necessary context and details through TalkBack.
Confirmation
- Turn on TalkBack
- Perform a "touch to explore" gesture on the control
- For informative images:
- Accessible: Receives focus and announces a meaningful description.
For decorative images:
- Accessible: Does not receive focus individually. Within a group is accepted.
How to Fix
Native Android
ImageView image = .......; // Role: Image
image.setContentDescription("Tasty Chocolates"); // Name: Tasty Chocolates.React Native
React Native does not add the accessibility role automatically to many elements. Be sure to add accessibilityRole="image" to all images you want to be available to assistive technology. The axe Accessibility Linter VSCode Extension and axe DevTools Linter now include React Native support which can help you catch bugs like these prior to UI testing.
- If the image portrays information the user needs, give it a descriptive
accessibilityLabelto relay that information, and set the accessible property to true:
<Image
...
accessible={true}
accessibilityLabel="A chai tea latte in a white mug with a newspaper behind it."
/>- If the image does not portray unique information, such as a background or decorative image, make it not focusable:
<Image
...
accessible={false}
/>