: keine vs visibility: hidden vs text-indent: 9999 Wie Bildschirmleser verhalten mit jedem?

Question

Was ist der Unterschied zwischen diesen drei für Screenreader-Nutzer?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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