WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Proper way to hide content from a screen reader

for

From: Jared Smith
Date: Nov 16, 2009 3:50PM

On Mon, Nov 16, 2009 at 3:22 PM, D A wrote:
> How reliable is display: none for hiding from a screen reader?

It's pretty reliable. There are a few, very rare instances where
display:none alone won't hide content
(http://juicystudio.com/article/screen-readers-display-none.php), but
using display:none and visibility:hidden together should certainly do
the trick.

> Is there a more proper way to do that?

Because the content is presumably revealed with javascript, you might
consider generating the content and injecting it into the document
entirely with javascript. A problem with display:none is that it will
be visible if the user has styles disabled. Seeing a time-out message
in this case could be quite confusing. Writing the content with
javascript at the appropriate time and injecting it into the document
would alleviate this potential issue.

Jared Smith
WebAIM