display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?
What is the difference between these three for screen reader users?
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.
There's good explanation about this in A List Apart. http://www.alistapart.com/articles/fir/ It depends on product.
PRODUCT DISPLAY: NONE VISIBILITY: HIDDEN Hal version 5.20 Does not read Reads IBM Home Page Reader 3.02 Does not read Does not read Jaws (4.02, 4.50, 5.0 beta) Reads Reads OutSpoken 9 Does not read Does not read Window-Eyes 4.2 Does not read Does not read
Please note that this article is from 2003, and the last change to that page on ALA was 2004. Things have changed. The WebAIM page was last updated in 2019: https://webaim.org/techniques/css/invisiblecontent/
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.
There are many techniques to hide content visually but have it available for screen readers.
The H5BP technique works in FF, Webkit, Opera and IE6+
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}