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.
People using VoiceOver are most impacted. Informative images should have their context, information or purpose read when focused by VoiceOver.
- 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.
An issue found by this rule is caused by not using
accessibilityLabel, or by inaccurately marking an image as an accessibility element.
- 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.
- If the image portrays information the user needs, give it a descriptive
accessibilityLabelto 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
- 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)