ImageView Name

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

1. Turn on VoiceOver
2. Attempt to focus the image
3. 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:

1. Navigate to the image
2. Confirm that the Inspectors Panel is visible
3. Select the Identity Inspector
4. If the image portrays information the user needs, under "Accessibility", write the information in the "Label" text field.
5. 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

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

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>