: keine vs visibility: hidden vs text-indent: 9999 Wie Bildschirmleser verhalten mit jedem?
-
20-09-2019 - |
Frage
Was ist der Unterschied zwischen diesen drei für Screenreader-Nutzer?
Lösung
siehe: http://css-discuss.incutio.com/?page=ScreenreaderVisibility
display: none: wird nicht gesehen noch gehört werden. *
Sichtbarkeit: versteckt: wird nicht gesehen noch gehört werden. *
text-indent: 9999. wird nicht gesehen werden, aber es wird zu hören
- Die meisten der Bildschirmleser wird nicht 'sprechen' display: none und Sichtbarkeit: versteckt , aber es gibt einige Screenreadern wie pwWebSpeak und HtReader, die auch diese lesen.
Andere Tipps
Es gibt gute Erklärung darüber in A List Apart. http://www.alistapart.com/articles/fir/ Es kommt darauf an Produkt.
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
Es ist eine sehr gute Zusammenfassung, wie Screenreadern interpretiert diese Eigenschaften unter WebAIM .
Auf den Punkt gebracht, visibility: hidden
und display:none
Willen Text verbergen von Screenreadern wie es von anderen tut. Alle anderen Methoden wird ‚sichtbar‘ zu einem Bildschirmleseprogramm sein.
Es gibt viele Techniken zu verstecken Inhalt optisch, sondern haben es verfügbar für Screenreader.
Die H5BP Technik funktioniert in FF, Webkit, Opera und IE6 +
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Komplette answere ist hier, um sicherzustellen, Chrom doesnt Autoshow / autofill Eingabefelder. Auf meiner Web-Seite (New User), Telefonfeld und Passwort fioeld wurden autofilled mit Cache-Daten werden. Um werde diese loszuwerden, habe ich zwei Dummy-Felder und gab ihnen eine Klasse, die sie für den Benutzer unsichtbar macht. Eine jquery Funktion zu zeigen, und dann versteckt diese nach einem Bruch.
JQuery-Funktion Show & Hide:
$().ready(function() {
$(".fake-autofill-fields").show();
// some DOM manipulation/ajax here
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1000);
});
Klasse:
.fake-autofill-fields
{
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Eingabefelder:
<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>