views:

713

answers:

2

What is the difference between these three for screen reader users?

+2  A: 

There's a very good summary of how screen readers interpret these properties at WebAIM.

In a nutshell, visibility: hidden and display:none will hide text from screen readers just like it does from others. All other methods will be 'visible' to a screen reader.

anschauung
But i downloaded NVDA screen reader software and it reads display:none content
metal-gear-solid
Yeah, unfortunately screen readers are as inconsistent as sighted browsers when it comes to CSS. The standard is as described above, but there will always be a few that ignore standards.
anschauung
+1  A: 

refer: http://css-discuss.incutio.com/?page=ScreenreaderVisibility

display:none: will not be seen nor heard. *
visibility: hidden: will not be seen nor heard. *
text-indent: 9999: will not be seen but it will be heard.

  • Most of the screen reader will not 'speak' display:none and visibility: hidden , but there are few screen readers like pwWebSpeak and HtReader which will read even these too.
Rakesh Juyal
I tested with NVDA screen reader and it reads those elements which is hidden by display:none
metal-gear-solid
There is a similar comment in the link i have specified. RTIMO.
Rakesh Juyal