ImageView Name

Link to ImageView Name copied to clipboard

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 = .......;
image.setContentDescription("A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted.");

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 form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

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

<Image
    ...
    accessible={false}
/>

.NET MAUI

Images that have not been given a content description in .NET MAUI are automatically marked as not important for accessibility. This means that any image not intentionally given a description passes in axe DevTools Mobile as a decorative image, when it may not have been intended to be a decorative image. Ensure all images that convey information or context are provided an appropriate description.

Option 1: If the image portrays information the user needs, give it a descriptive SemanticProperties.Description to rely that information.

<Image
    ...
    SemanticProperties.Description="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
/>

Option 2: If the image portrays information the user needs, provide a Label below the Image element to rely that information.

<StackLayout
    HorizontalOptions="FillAndExpand"
    VerticalOptions="StartAndExpand">        
    <Image
        BindingContext="{x:Reference imageLabel}"
        SemanticProperties.Description="{Binding Path=Text}"
        ...
    /> 

    <Label
         x:Name="imageLabel"
         Text="A form highlighting the name field in a red box with an error message below that reads Invalid name: special characters are not accepted."
         ...
    />
</StackLayout>