ImageView Name

Link to ImageView Name copied to clipboard

WCAG 2.0 - 1.1.1 A Impact - Critical

note

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

Any image that portrays information or is VoiceOver focusable should have a name.

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 unique information, under "Accessibility", write the information in the "Label" text field.
  5. 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)