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?

Answers


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

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

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

Need Your Help

Resharper Unit Tests not running

c# unit-testing visual-studio-2013 resharper

I'm trying to get started writing unit tests in a project. I wrote the createTest first and tried it. This test passed and I started writing my other tests.

What work does the process in container "gcr.io/google_containers/pause:0.8.0" do?

docker kubernetes

I have known clearly about the usage of the docker option --net=container:NAME_or_ID, I also have read the source code of kubernetes about how to configure the container to use the network of