Decorative content

Must

Decorative images must be hidden from assistive technology.

Description

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.

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

UIView, UIControl, and UIImageView objects along with any custom objects descended from these are not accessibility enabled by default. Other UI elements such as UIButton and UILabel are accessibility enabled and must be accessibility disabled if they are not meant to be accessible.

iOS example

[somethingDecorative setIsAccessibilityElement:NO];                        
[somethingDecorative setIsAccessibilityElement:YES];                        

ANDROID

Developers should ensure that elements that do not convey meaning or information to a user are not focusable via the android:focusable property.

Android example

//blue rectangle used for decoration that does not receive focus - in this case android:focusable is false by default
<ImageView android:layout_height="wrap_content" android:id="@+id/image_1" android:src="@drawable/blue"></ImageView>                        
//blue rectangle used for decoration that can receive focus
<ImageView android:layout_height="wrap_content" android:id="@+id/image_1" android:src="@drawable/blue" android:focusable="true"></ImageView>                        

HTML

For images, provide alt text that is null ({code)alt="") or CSS background images. For input fields not meant for the user, use the attribute type="hidden". For other inactive buttons and elements set the disabled attribute. For obscured or off-screen content, use aria-hidden="true" and tabindex="-1".

HTML example

Button that is not currently used:

<button type="button" disabled="disabled"></button>                        

Button that is not currently used:

<button type="button"></button>                        

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 "unavailable" or "disabled" and verify that they are not actionable.
Results

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 "unavailable" or "disabled" and are not actionable.