display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

Question

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

I have SOME experience with screen readers, although limited, but I would think they ignore CSS... do modern screen readers also ignore javascript generated content? — Zoidberg, Nov 18 '09 at 12:38
JAWS (http://www.freedomscientific.com/products/fs/jaws-product-page.asp), the most popular screen reader (http://www.webaim.org/projects/screenreadersurvey2/) isn't a dedicated browser, but an application that makes other programs, such as browsers, accessible. I don't know exactly how it works, but I presume it just piggy-backs on the browser's rendering engine to decide what to say. — mercator, Nov 18 '09 at 22:51
Why would you want a hidden text to be read out?. Is it know whats hidden? I am trying to understand application of this CSS property better so you know which one to use when. — user1815356, Nov 10 '12 at 23:53

score 41 · Accepted Answer · answered Nov 18 '09 at 12:59

41

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.

answered Nov 18 '09 at 12:59

Rakesh Juyal

35,919
68
173
214

5

I tested with NVDA screen reader and it reads those elements which is hidden by display:none – Jitendra Vyas Nov 18 '09 at 13:22
There is a similar comment in the link i have specified. RTIMO. – Rakesh Juyal Nov 18 '09 at 13:29
The above possibility is not working with JAWS in IE – albert Jegani Jun 08 '16 at 05:47

score 17 · Answer 2 · edited May 15 '20 at 13:53

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/

score 11 · Answer 3 · answered Nov 18 '09 at 12:44

11

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.

answered Nov 18 '09 at 12:44

anschauung

3,697
3
24
34

1

But i downloaded NVDA screen reader software and it reads display:none content – Jitendra Vyas Dec 13 '09 at 09:04
1

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 Dec 13 '09 at 16:34
1

I find that NVDA screen reader doesn't read out `display: none` content if it is in that state when the screen loads; but if javascript is used to change the state to `display: none` the screen reader doesn't realise, and reads out the content. – Vince Bowdren Nov 06 '13 at 14:29

score 4 · Answer 4 · answered Nov 21 '13 at 19:48

4

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;
}

answered Nov 21 '13 at 19:48

Oriol

11,660
5
35
37

damn that explains why i saw this exact snippet on someone s css code, wish they would atleast comment – PirateApp Nov 07 '19 at 17:21

score -1 · Answer 5 · edited Oct 18 '16 at 08:23

Complete Answere is here to make sure chrome doesnt autoshow/autofill input boxes. On my web page ( New User) , telephone field and Password fioeld were being autofilled with cached data. To get rid of this, I created two dummy fields and gave them a class which makes them invisible to the user. A jquery function to show and then hide these after a fraction.

Jquery function to show & hide:

$().ready(function() {
    $(".fake-autofill-fields").show();
    // some DOM manipulation/ajax here
    window.setTimeout(function () {
        $(".fake-autofill-fields").hide();
    }, 1000);
});

Class:

.fake-autofill-fields
{ 

     border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}

Input fields:

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>

display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

5 Answers5

Linked