Hide Text with CSS While Maintaining Accessibility
While checking a recent design with Fangs — a screen reader emulator for Firefox — I discovered that my attempts to hide some headings from sighted users, while keeping them available for the blind, had backfired. Instead, nobody could see (or hear) them.
It turns out that the problem was my use of the CSS declaration display: none, which causes the affected text to go unread by Jaws (the most popular screen reader on the market). I found a solution to my problem at WebAIM, where there’s an article on the subject of hiding content with CSS. They’ve already done all the cross-browser testing, and cooked up a method that should work everywhere and for everyone.
Technorati Tags for This Post
Line and paragraph breaks are automatic. Your e-mail address will never be published publicly unless you put it in your comment (and then I’d probably edit it out).
Please read my comment policy if this is your first time commenting here.