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.
