«
»

Understanding How to Use CSS for Accessibility (Hiding Stuff)

May 19th, 2011 at 1:47 pm

For the most part screen readers don’t care about CSS. After all if you are a blind user, why do you want to know what color something is or where it is placed on the screen. This goes back to using HTML to mark up content, and using CSS to style the page. The screen reader generally only cares about the content.

There are a few exceptions. display: and invisible: are the two that stand out.

Example 1:

How to hide content from both screenreaders and visual users.

CSS Code


.hidden { 
display: none; 
visibility: hidden;
}

Example 2:

Hide only the visual content and let it be visable to the screen reader

CSS Code


.visuallyhidden { 
position: absolute; 
clip: rect(1px 1px 1px 1px); /* for IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
border: 0; 
padding: 0; 
width: 1px;
height: 1px ; 
overflow: hidden;
}

Example 3:

Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard. Great to create a skip nav that is usable by the keyboard only user as well as the blind user.

CSS Code


.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
clip: auto; 
height: auto; 
margin: 0; 
overflow: visible;
position: static; 
width: auto;
}

Standards:

Tags: ,

In Accessibility, Best Practices, WCAG. Both comments and pings are currently closed.

Comments are closed.