Making Text Visible to Screen Readers Only

by Kevin Makice

The Accessibility in Mind site recommends the following CSS when creating non-visible text specifically for screen readers:

.hidden 
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

The CSS techniques presented in the article are used to hide content from sighted users while making it accessible to screen reader applications. “Both kinds of users will be able to use the content intuitively, without having to adjust for either too much or too little information in the markup.”

Web AIM

Advertisements