Mobile Accessibility Guidelines - Text Equivalents
Decorative content must
Decorative images must be hidden from assistive technology.
Hidden or inactive content that is, for example, behind other content such as a pop-over or side-drawer, should not be navigable for users of assistive technology as they may think they can interact with this content. Equally, the content of the pop-over or side-drawer becomes compromised.
This can be achieved by setting the appropriate properties or states on an element or object, so assistive technology is informed that it is off-screen, obscured, or hidden.
iOS
If an image, object, or element is decorative or not intended for user interaction, avoid applying a label, and make sure that the isAccessibilityElement
property is set to false
.
iOS Example (Objective-C)
Make sure that decorative content is not focusable
[myElement.setAccessibilityElement:NO];
Android
For decorative images, ensure the importantForAccessibility
property is set to no
, the focusable attribute
is set to false
, and (for older versions of Android) the contentDescription
is set to @null
. TalkBack will then ignore the images.
Android Pass Example
<ImageView
android:id="@+id/example_decorative_image"
android:source="@drawable/example_decorative_image_source"
android:focusable="false"
android:importantForAccessibility="false"
android:contentDescription="@null" />
HTML
Even if an image is decorative, the alt
attribute must still be applied to the img
element, but the value of this attribute must be set to null (alt=""
)
HTML Pass Example
<img scr="example_decorative_image" alt="" />
Testing
Procedures
- Activate a screen reader.
- Locate any images, objects, or elements that do not have meaning, are visibly disabled, or appear obscured.
- Attempt to move focus or navigate to these images, objects, or elements.
- Verify that the images, objects, or elements do not receive focus and are not rendered by a screen reader.
- If the images, objects, or elements can be navigated to, ensure that they are announced as 鈥渦navailable鈥 or 鈥渄isabled鈥 and verify that they are not actionable.
Outcome
Either of the following checks must be true:
- Images, objects, or elements that are not meaningful do not receive focus and are not read by screen readers;
- Images, objects, or elements that are not meaningful yet do receive focus are announced as 鈥渦navailable鈥 or 鈥渄isabled鈥 and are not actionable.