Background images

Must

Background images that convey information or meaning must have an additional accessible alternative.

Description

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 allows background images to be set for most views. The views for an accessibility element can be given {labels}labels{/labels}, for example, to provide information on these images. There is no difference regarding the accessibility of decorative background images and inline images in iOS. All other accessibility standards and guidelines still apply - for example, apps must enter the proper contrast of colours between the background and any text on top of it and must not use of background images of text.

iOS example

LogoImage is a UIImageView:

[LogoImage setIsAccessibilityElement:YES];
[LogoImage setAccessibilityLabel:NSLocalizedString(@"Sunny", @"Accessibility label for logo image")];
[LogoImage setAccessibilityHint:NSLocalizedString(@"The sun is shining the birds are singing", @"Accessibility hint for the logo Image")];                        

LogoImage is a UIImageView, UIImageViews by default are not accessible:

(IsAccessibilityElement=NO) and have no label or hint                        

ANDROID

Developers should ensure that images that convey meaning or information to a user are focusable. There is no difference regarding the accessibility of decorative background images and inline images in Android apps. All other accessibility standards and guidelines still apply - for example, apps must ensure the proper contrast of colours between the background and any text on top of it and use of background images of text.

Android example

<ImageView android:layout_height="wrap_content" android:id="@+id/sunnyday" android:src="@drawable/blue" android:focusable="true" android:contentDescription="Sunny and Warm"></ImageView>                        
<ImageView android:layout_height="wrap_content" android:id="@+id/sunnyday" android:src="@drawable/blue"></ImageView>                        

HTML

As it is not possible to assign alternative text to a CSS background, either use an inline image or a suitable replacement technique in CSS to provide a visual and textual alternative.

HTML example

<a ...><img src="email.jpg" alt="Email" /></a>                        
<div tabIndex="0" onclick="email();" style="background-image:url('email.jpg');"> </div>                        

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.
Results

The following check is true:

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