Title: Using role=img and aria-label to render informational non-text content via CSS

Application:

SC 1.1.1 Non text content (Level A)

Note:

SC 2.4.4 Link Purpose (in context) may apply to links with CSS background images that convey info
SC 1.4.5 Images of text may apply to such images used in the background

Description:

The objective of this technique is to demonstrate how WAI-ARIA role=img and the aria-label property may be employed to render informational non-text content in the background via CSS when design or implementation challenges constrain the ability to use native elements like the HTML IMG element instead.

An element that is styled with the background image is exposed much like a native HTML IMG element by screen reader software when the element is assigned a role="img" and equivalend text with the aria-label attribute. For user interface elements, the equivalent text may be provided via the title or aria-label attributes. This may be null in some situations. e.g. For a link, its purpose may be available from link's visible text or title or aria-label set on the anchor itself.

However, when users alter viewing preferences by suppressing author supplied styles or by using platform / user agent features, it is possible that the background image is not rendered or fails to convey the intended information. (See Failure F3). This technique may be combined with other techniques, such as a scripting technique to address this concern.

Content authors and developers are therefore advised to use background images to render information only when native elements cannot be used.

Examples:

Informational image in the background
Image of text in the background
Links with logo images in the background

Live example:

Using WAI-ARIA role=img for CSS Background Images

Related Techniques

F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

Test Procedure:

Check if the background image conveys essential information that:
1. helps to better understand content on the page, or
2. is required to understand the purpose or state of a user interface element on the page
Check if the element that is styled with the background image has role="img" and a non-empty meaningful aria-label value. (see exception for user interface controls) in step 3.
In case of a user interface control like a link, check if its purpose is available in text from the image's equivalent text or text associated directly with the link

Expected Outcome:

All tests 1 , 2 and 3 are passed