����ý

Background images are not available to assistive technology such as screen readers and are not supported on devices with minimal support for CSS. Additionally, a background image may not load.

It is not possible to directly assign alternative text to a CSS background image. Another method must also be used to provide the same information visibly, and in a way that is programmatically determinable by assistive technology, such as screen readers.

---

iOS

iOS does not distinguish between background and foreground images. All images added to a view are generally added as an Image View (UIImageView). If the resulting image is decorative, you must set the isAccessibilityElement property to false so that it is not identifiable to VoiceOver. Optionally, provide an “empty” accessibilityLabel. If the resulting image conveys information, you must set this property to true, and also provide a text equivalent through the accessibilityLabel attribute.

iOS Example (Objective-C)

Meaningful image:

[myFunctionalImage:setIsAccessibilityElement:YES];
[myFunctionalImage.setAccessibilityLabel:@"[alternative text]";

Decorative image:

[myFunctionalImage:setIsAccessibilityElement:NO];
[myFunctionalImage.setAccessibilityLabel:@""];

---

Android

Android does not distinguish between background and foreground images. All images added to a view are generally added as an ImageView, and must be provided with the android:focusable attribute. This attribute must be set to true for meaningful images, and false for non-functional, decorative images. The android:contentDescription attribute must also be provided for meaningful images to provide alternative text for the image. It must also be provided to decorative images and set to a value of @null in order to support older versions of Android.

Android Pass Example

Meaningful image:

<ImageView
android:id="@+id/myFunctionalImage"
android:src="@drawable/[myFunctionalImage source]"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:contentDescription="[Alternative text]" />

Decorative image:

<ImageView
android:id="@+id/myNonFunctionalImage"
android:src="@drawable/[myNonFunctionalImage source]"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="@null" />

---

HTML

There is no specific technique for assigning alternative text to CSS-based background images. Therefore, either use an HTML-based inline image (using the img element), or a suitable image replacement technique in CSS and JavaScript to provide a text alternative. Refer to for an example implementation.

HTML Pass Example

Native (preferable) approach:

<a href="home.htm"><img src="home_page_logo.png" alt="Home page"></a>

---

Testing

Procedures

1. Activate a screen reader.
2. Identify all images which contain information.
3. Identify which images are background images.
4. Verify that alternative text is announced by a screen reader.
5. In some cases this may require checking the code or testing on a non-mobile device.

Outcome

The following check is true:

• The image can be focused using assistive technology and meaningful information is announced.

---