What is the difference between these three for screen reader users?
What is the difference between these three for screen reader users?
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"/>