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:
- WCAG 2.0 C7: Using CSS to hide a portion of the link text
- WCAG 2.0 SC 2.2.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone. (Level A)
- WCAG 2.0 SC 2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone. (Level AAA)
Tags: Accessibility, WCAG