ImageView Name

Link to ImageView Name copied to clipboard

Focusable image elements should provide a meaningful accessible name available for assistive technologies such as VoiceOver and Voice Control.

Impact

People using VoiceOver are most impacted. Informative images should have their context, information or purpose read when focused by VoiceOver.

Confirmation

Turn on VoiceOver
Attempt to focus the image
One of the following will occur:
- Inaccessible: Image is focusable but does not announce a Name in VoiceOver.
- Accessible: Image is not focusable because it does not portray unique information.
- Accessible: Image is focusable and has a Name.

How to Fix

UIKit

note

Requires the accessibility layer for accurate results. Learn how to load the accessibility layer here.

An issue found by this rule is caused by not using accessibilityLabel, or by inaccurately marking an image as an accessibility element.

In storyboard:

Navigate to the image
Confirm that the Inspectors Panel is visible
Select the Identity Inspector
If the image portrays unique information, under "Accessibility", write the information in the "Label" text field.
If the image does not portray unique information, under "Accessibility", unselect the "Enabled" checkbox.

In code:

If the image portrays information the user needs, give it a descriptive accessibilityLabel to relay that information:

image.accessibilityLabel = "Puppy staring at you with big, brown eyes."

If the image does not portray unique information, such as a background or decorative image, make it not focusable:

image.isAccessibilityElement = false

SwiftUI

If an image provides information the user needs, you can either set .accessibility(label: Text("Accessibility Label Here")) view modifier on the image, or you can utilize the Image initializer, which includes the label parameter.

Image("format_info", label: Text("Please utilize an outline format."))

If the image does not portray unique information, such as a background or decorative image, hide it with the below view modifier:

Image("background_blue")
    .accessibility(hidden: true)

React Native

important

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 accessibilityLabel to 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}
/>