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

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 information the user needs, under "Accessibility", write the information in the "Label" text field.
If the image does not portray information the user needs, 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 = "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 information the user needs, such as a background or decorative image, make it not focusable:

image.isAccessibilityElement = false

tip

In UIKit apps, an image without an accessibilityLabel is not focusable with assistive technology by default.

The properties we use to check focusability from Apple may be inaccurate when an accessibilityIdentifier is set on the image. Due to this unexpected behavior, results for ImageView Name issues in UIKit apps will report as Needs Review. A bug report has been filed with Apple.

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("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 information the user may need, 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 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 information the user needs, 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>