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

1. Activate a screen reader.
2. Locate any images, objects, or elements that do not have meaning, are visibly disabled, or appear obscured.
3. Attempt to move focus or navigate to these images, objects, or elements.
4. Verify that the images, objects, or elements do not receive focus and are not rendered by a screen reader.
5. 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.

---