Page tree
Skip to end of metadata
Go to start of metadata

Description

Developers should never use the same foreground color and background color or font-size="0" to hide text from sighted users.  If the font-size="0", screen reader will not render the text, so it is hidden from all users.

 

Note:  If the same color content is a link, it should not be positioned off screen. Keyboard-only users and high contrast users may question what element has received focus. Changes may need to be made to the template to make sure the linked content is visible. However, if only a part of a link need to be positioned off screen that is acceptable. (i.e. <a href="/.."><span class="sr-only">Record Number Of Applicants</span> Read More</a>)

 

Checkpoint:

Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. (WCAG 2.0)

 

Message:

Content has invalid contrast ratio color=#000 background=black

Color Contrast Ratio Tool

WebAIM Color Contrast Checker


Fix

To ensure screen readers render content and it is hidden from sighted users, use CSS off screen positioned text. Use the CSS class name "sr-only". 

Note: "sr-only" will be the campus wide name used for all off screen positioned. 

 

HTML Code:

<span class="sr-only">Off screen positioned text</span>

 

CSS Code:

.sr-only {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
z-index: -1000;
}
  • No labels