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

前端 未结 5 1721
青春惊慌失措
青春惊慌失措 2020-12-08 06:21

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

5条回答
  •  有刺的猬
    2020-12-08 07:07

    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:

    
    
    

提交回复
热议问题