FXX: Failure of Success Criteria 1.4.5 and 1.4.9 due to using image replacement techniques that make text inaccessible to screen reader users (first draft)

Author: Detlev Fischer (fischer [ at] dias [dot] de)

Date: 12 November 2011

Applicability

HTML, XHTML and CSS

This failure relates to:

Description

Various techniques exist that use CSS to replace text with background images of text, for example, by specifying an offset that moves the text outside of the viewport. This technique is often used to render headings in fonts that are not widely available on user agents.

In order to ensure that screen reader users will be able to access the underlying text that is removed from the viewport, authors should avoid using CSS to hide the text with display:none or visibility:hidden because this will make the replaced text inaccessible for most screen reader users.

Examples

Failure Example 1:

Failure Example 1: Replacing heading text by background images and hiding the text with CSS using display:none

Example Code:


<h3 id="replaced-heading_1">
	<span>Don't swim in freezing water</span>
</h3>

/* css */
#replaced-heading_1 {
	width: 450px;
	height: 25px;
	background-image: url(heading_1.gif);
	}
h3 span {
	display: none;
	}

Resources

Resources are for information purposes only, no endorsement implied.

Related Techniques

Tests

Procedure

  1. View page containing images of text without CSS
  2. Check that the content of images of text is available as proper text
  3. Check that text is not replaced with CSS display: none or visibility:hidden

Expected Results

If check #2 or check #3 are false, then the failure condition applies and the content fails these Success Criteria.