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?

Furbish

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? – Thimbu

JAWS (freedomscientific.com/products/fs/jaws-product-page.asp), the most popular screen reader (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. – Glide

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. – Dett

Answer 1

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.

Plumbago

I tested with NVDA screen reader and it reads those elements which is hidden by display:none – Furbish

There is a similar comment in the link i have specified. RTIMO. – Plumbago

The above possibility is not working with JAWS in IE – Abbottson

Answer 2

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/

Verdugo

What about NVDA`? – Cooperman

Answer 3

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.

Salangi

But i downloaded NVDA screen reader software and it reads display:none content – Furbish

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. – Salangi

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. – Potation

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

Moraine

damn that explains why i saw this exact snippet on someone s css code, wish they would atleast comment – Upi

Answer 5

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"/>

Corabelle

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"/> – Corabelle

autocomplete="off" ?! – Cooperman