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



This failure relates to:


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.


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>

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


Resources are for information purposes only, no endorsement implied.

Related Techniques



  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.