In HTML, wie kann ich text, der ist nur zugänglich für Screenreader (z.B. für blinde Menschen)?

Ich habe eine website, auf der die farbigen divs mit zahlen, z.B. einen roten block mit der Nummer 2 innerhalb von es. Die Farbe ist wichtig für das Verständnis. Ein Blinder Benutzer per E-Mail mich Fragen, ob ich es schaffen könnte sagen, "2 rot" für seine screen-reader.

Habe ich versucht, indem Sie diese als ein alt="2 rot" aber er sagte, dass etwas nicht tun. Er denkt, es könnte nur Lesen, alt-tags für Bilder.

Ist es ein guter Weg, dies zu tun für divs?

InformationsquelleAutor Some Guy | 2014-09-25
  1. 25

    Soweit alt-text, Sie sind richtig, das funktioniert nur für Bilder.. Aber Sie können aria-label an die Stelle der " alt " - Attribut für nicht-Bild-Elemente, wie etwa so:

    Lösungen, die funktionieren

    ARIA Etiketten ★ ★ ★ ★ ★ ★

    aria-label (nicht konzentriert, mit aria-labeledby) wird verwendet, um off-screen beschreibenden Inhalte in einem element viel in der Art einer alt= Attribut fügt off-screen-beschreibende Inhalte zu Bildern werden verwendet, wenn die Bilder nicht darstellbar.

    Der Unterschied ist, aria-label können verwendet werden, auf nicht-Bild-Elementen.

    <div aria-label="test A"><p aria-hidden="true">test B</p></div>
<!--
     result (screenreaders):  test A
     result (regular):        test B
-->

    Zusätzlich die aria-hidden Attribut versteckt sich der innere text.

    Position + Clip + Zusammenbruch ★ ★ ★ ★

    .screenreader {
    position: absolute !important; /* Outside the DOM flow */
    height: 1px; width: 1px; /* Nearly collapsed */
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
    clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}

    Den clip wird verwendet, um zu verstecken, die 1px x 1px element vollständig, sonst wird es noch sichtbar auf dem Bildschirm.

    Position ★ ★ ★

    .screenreader {
    position: absolute;
    left:-9999px;
}

<div>Wed<span class="screenreader">nesday</span>, Sept<span class="screenreader">ember</span> 24, 2014</div>

    Einzug ★

    .screenreader {
    text-indent: -5000px;
}

    Dem eigentlichen Einzug-Wert ist nicht wichtig, solange es außerhalb der Reichweite Ihrer Seiten-layout. Im Beispiel wird die Verschiebung der Inhalte in der linken 5000 Pixel.

    Diese Lösung funktioniert nur für vollständige Blöcke von text. Es funktioniert nicht gut auf Anker oder Formulare, oder von-rechts-nach-Links-Sprachen, oder bestimmte inline-text, vermischt mit anderem text.

    Wird nicht funktionieren

    visibility: hidden; und/oder display:none;

    Diese Formate ausblenden von text für alle Benutzer. Der text ist entnommen aus dem visuellen Fluss von der Seite und ignoriert die von Bildschirmlesegeräten. Verwenden Sie dieses CSS-wenn Sie möchten, dass der Inhalt von einem Screenreader vorgelesen. Aber verwenden Sie es für die Inhalte, die Sie wollen nicht von der Sprachausgabe gelesen.

    width:0px;height:0px

    Als oben, da ein element ohne Höhe oder Breite entfernt ist die Strömung von der Seite, die meisten Screenreader ignorieren diese Inhalte. HTML-Breite und-Höhe geben das gleiche Ergebnis. Nicht Größe-Inhalt auf 0 Pixel, wenn Sie möchten, dass der Inhalt von einem Screenreader vorgelesen.

    Weiter:

    • visibility:hidden oder display:none wird für die Arbeit nicht einem einzigen Bildschirm-Lesegerät (außer wenn Sie deaktivieren CSS). Sie sind die 2 zuverlässige Techniken, um das ausblenden von Inhalten aus jeder screen-reader-Benutzer sind oder nicht.
    • Danke für die Korrektur, ich habe aktualisiert die Antwort reflektiert.
    • Die person, die tatsächlich erzählte mir, dass aria-label funktioniert nicht, mit seinem Leser, obwohl die spec sagt, es sollte...
    • aria-label funktioniert nicht mit Backen, wenn ich anfügen das Attribut einen standard-div, noch aria-labeledby, hat jemand herausgefunden, warum? Ich bin mit diesem mit FF und IE
    • aria-label ist nur erlaubt, sich auf etwas mit eine explizite Rolle, so verstehe ich nicht, wie das "beste" Beispiel funktioniert entweder.
    InformationsquelleAutor davidcondrey
  2. 2

    Sofern nicht anders angegeben, in der akzeptierten Antwort mindestens Chromevox1 und NVDA2 auch lese-Elemente mit Stil display:none oder visibility: hidden CSS-Attribute, wenn aria-hidden=false eingestellt ist. Allerdings derzeit nur in Chrome (65), nicht in Firefox oder Edge (nach meinen tests).

    Ja (derzeit leider nur im Chrome) ist es auch möglich, so etwas zu tun:

    <h1 aria-hidden="false" style="display: none;">Heading only for Screen Readers</h1>
<h1 aria-hidden="false" style="visibility: hidden;">Second Heading only for Screen Readers</h1>
<h1 aria-hidden="true">Heading only for Screen</h1>

    wo Chromevox und NVDA Lesen der ersten und der zweiten Position.
    Auch zu sehen: https://jsfiddle.net/4y3g6zr8/6/

    Wenn alle Browser Zustimmen würde, auf dieses Verhalten, es wäre eine viel sauberere Lösung als die, die alle CSS-tricks, die in den anderen Lösungen.

    1Chromevox https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn
    2NVDA https://www.nvaccess.org/

    • Vielen Dank, genau das was ich suchte. Es wäre gut, eine tabellarische übersicht über die Vorrang in die browser/screenreader-Kombination und auch das, was Vorrang haben sollte von einem Normen-Perspektive.
    InformationsquelleAutor klues
  3. 1

    Bezüglich der Frage im Titel: Nein, es gibt keine Möglichkeit (im HTML-oder anderweitig), um text, der nur zugänglich ist für screen-Reader. Was auch immer Sie tun könnten, wie mit einer img element mit einem nicht leeren alt Attribut und eine fehlende oder dysfunct src Attribut` oder mit CSS zu verstecken, etwas visuell, steht jede software, die kümmert sich, es zu Lesen (und kann nicht zugegriffen werden auf dem Bildschirm Leser für einen oder anderen Grund).

    Auf der anderen Seite, wenn Sie auch tatsächlich nutzen, z.B.

    <div class=foo>2 <img alt=red></div>

    dann die meisten Screenreader Lesen wie "zwei roten", aber so gut verhält, normalen Browser, so dass die Wirkung ist nicht beschränkt auf die Bildschirm-Leser.

    Was Sie tun sollten für die Zugänglichkeit, ist eine andere Frage und hängt vom Kontext und von dem Zweck der Verwendung von Roter Farbe. Beachten Sie, dass selbst wenn der browser zeigt eine box, wie rot der Benutzer möglicherweise nicht sehen Sie es als eine rote, wegen der Farbe Blindheit; insbesondere dann, wenn es relevant ist zu unterscheiden zwischen rot und grün, viele Menschen scheitern, dies zu tun.

    Gibt es möglicherweise eine einfache Lösung in einem bestimmten Fall, oder es könnte ein heikles problem mit keine gute Lösung. Für Allgemeine Hinweise und verschiedene Techniken, siehe das Dokument How to Meet WCAG 2.0: die Verwendung von Farbe.

    • Hi, ist das immer noch die workaround-Lösung im Jahr 2016? Ich versuche auch, um herauszufinden, ob es gibt einen Weg, um mit einem string Lesen, nur durch den screenreader, der an den div
    InformationsquelleAutor Jukka K. Korpela
  4. 1

    Können Sie einen optisch hidden-element innen:

    <div>
    <span class="visually_hidden">2 red</span>
</div>

    Zu "optisch zu verstecken", können Sie ausleihen, wie HTML5 boilerplate es macht:

    .visually_hidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
    InformationsquelleAutor kinakuta
  5. -1

    Wie wäre es mit der schriftart, die Farbe, die komplett transparent sind?
    Ich habe nicht ein screen-reader, um zu testen, ob diese Art von text ist lesbar, die von Bildschirmlesegeräten.

    .hovereffect a.info {
    color: #9c27b000 !important;
}
    InformationsquelleAutor Luke Dohner
Schreibe einen Kommentar