The CSS background image conveys information and is missing text alternative for assistive technology users.

Link to The CSS background image conveys information and is missing text alternative for assistive technology users. copied to clipboard

Rule ID:: alt-text-missing-background-image
User Impact:: Critical
WCAG :: 1.1.1.e

Rule

The alternative text for informative or actionable CSS images MUST be available as programmatically-discernible text in the HTML content.

Background

People who are blind cannot see images on a page. In order to give people who cannot see an image access to the information conveyed by the image, it must have a text alternative. The text alternative must describe the information or function represented by the image. Screen readers can then use the alternative text to convey that information to the screen reader user.

CSS background images cannot have an alt-attribute applied directly. However, if it is necessary to do so, you can add alternative text to informative and actionable CSS images using an aria-label.

It is important to note that elements must have semantic meaning in order to receive an aria-label. Elements with semantic meaning include <img>, <a>, and <h1>, because their tags tell you about what they contain. Elements like <span> and <div> are not semantic elements because they could contain many types of content. To give an aria-label attribute to a non-semantic element, you must also give it a role, e.g. role="img", thereby giving it semantic meaning.

Code Examples

Good Examples:

CSS image as a link has an aria-label:

<a href="http://www.facebook.com/dequesystems" class="fb" aria-label="Deque's Facebook page"></a>

CSS image has an aria-label:

<span class="fbicon" role="img" aria-label="Facebook"></span>

Note: It is important to note that elements like <span> and <div> are not semantic elements because they could contain many types of content. To give an aria-label attribute to a non-semantic element, you must also give it a role, e.g. role="img".

Failure Examples:

Alt on a span tag (span tags cannot have an alt-attribute):

<span class="fbicon" role="img" alt="Facebook"></span>

Functional CSS image has no alt:

<a href="http://www.facebook.com/dequesystems" class="fb"></a>