Damit ein Screenreader den Nutzenden eine gesprochene Benutzeroberfläche anzeigen kann, -Elemente müssen korrekte Beschriftungen oder Textalternativen haben. Ein Label oder Text Alternativ erhält ein Element seinen zugänglichen name, eine der wichtigsten Eigenschaften. zur Darstellung der Semantik von Elementen im Baum für Barrierefreiheit.
Wenn der Name eines Elements mit der role des Elements kombiniert wird, gibt es das Element Kontext von Nutzenden, damit sie verstehen, mit welcher Art von Element sie interagieren und wie es auf der Seite dargestellt wird. Wenn kein Name vorhanden ist, wird ein gibt der Screenreader nur die Rolle des Elements an. Stellen Sie sich vor, Sie versuchen, und Anhörung „Button“, „Kästchen“ "Bild" ohne zusätzliche Kontext. Deshalb sind Beschriftungs- und Textalternativen für eine gute, barrierefreies Design.
Name eines Elements prüfen
Mit den Entwicklertools von Chrome können Sie den zugänglichen Namen eines Elements ganz einfach überprüfen:
- Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Untersuchen aus. Dadurch werden die Entwicklertools geöffnet. Bereich „Elemente“.
- Suchen Sie im Bereich „Elemente“ nach dem Bereich Bedienungshilfen. Er ist möglicherweise ausgeblendet
hinter dem Symbol
»ein. - Suchen Sie im Drop-down-Menü Berechnete Eigenschaften nach dem Attribut Name.
<ph type="x-smartling-placeholder">Ob Sie nun ein img mit alt Text oder ein input mit einem
label, führen alle diese Szenarien zum gleichen Ergebnis: Eine
-Elements seinen zugänglichen Namen.
Nach fehlenden Namen suchen
Es gibt verschiedene Möglichkeiten, einem Element einen barrierefreien Namen hinzuzufügen. je nach Art des Projekts. In der folgenden Tabelle sind die häufigsten Elementtypen aufgeführt. die barrierefreien Namen und Links zu Erklärungen benötigen.
| Elementtyp | So fügen Sie einen Namen hinzu |
|---|---|
| HTML-Dokument | Dokumente und Frames mit Labels versehen |
<frame>- oder <iframe>-Elemente
|
Dokumente und Frames mit Labels versehen |
| Bildelemente | <ph type="x-smartling-placeholder"></ph> Fügen Sie Textalternativen für Bilder und Objekte hinzu. |
<input type="image">-Elemente
|
<ph type="x-smartling-placeholder"></ph> Fügen Sie Textalternativen für Bilder und Objekte hinzu. |
<object>-Elemente
|
<ph type="x-smartling-placeholder"></ph> Fügen Sie Textalternativen für Bilder und Objekte hinzu. |
| Tasten | Schaltflächen und Links beschriften |
| Links | Schaltflächen und Links beschriften |
| Formularelemente | Label-Formularelemente |
Dokumenten und Frames Labels hinzufügen
Jede Seite sollte eine
title
-Element, das kurz erklärt, worum es auf der Seite geht. Das title-Element gibt
der Seite ihren zugänglichen Namen. Wenn ein Screenreader die Seite aufruft, ist dies der
Text, der zuerst angesagt wird.
Die Seite unten hat beispielsweise den Titel „Mary's Maple Bar Fast-Back Rezept“:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Ebenso sollten alle frame- oder iframe-Elemente title-Attribute haben:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Während der Inhalt einer iframe ein eigenes internes title-Element enthalten kann, ist ein
hält der Screenreader normalerweise an der Frame-Grenze an und kündigt an,
Rolle – „frame“ – und der zugängliche Name, bereitgestellt durch das Attribut title. Dieses
kann der Nutzer entscheiden, ob er den Frame aufrufen oder überspringen möchte.
Fügen Sie Textalternativen für Bilder und Objekte hinzu.
Für img sollte immer Folgendes angegeben werden:
alt
, um dem Image den barrierefreien Namen zu geben. Wenn das Bild nicht geladen werden kann,
alt-Text wird als Platzhalter verwendet, damit Nutzer sehen, was das Bild war
zu vermitteln.
Guten alt-Text zu schreiben, ist eine Kunst, aber es gibt ein paar Richtlinien
können Sie diesen folgen:
- Feststellen, ob das Bild Inhalte enthält, die andernfalls schwer zu sehen wären die Sie aus dem Lesen des umgebenden Textes gewinnen können.
- Wenn ja, formulieren Sie den Inhalt so prägnant wie möglich.
Wenn das Bild als Dekoration dient und keinen nützlichen Inhalt liefert,
können Sie es mit einem leeren alt=""-Attribut versehen, um es aus den Bedienungshilfen zu entfernen.
Baum.
Bilder als Links und Eingaben
Für ein Bild, das in einen Link eingebettet ist, sollte mit dem Attribut alt der img Folgendes beschrieben werden:
zu der Nutzer gelangen, wenn sie auf den Link klicken:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Das Gleiche gilt, wenn ein <input type="image">-Element zum Erstellen eines Bildes verwendet wird
Schaltfläche alt-Text enthält, der die Aktion beschreibt, die auftritt, wenn
auf die Schaltfläche klickt:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Eingebettete Objekte
<object>-Elemente, die in der Regel für Einbettungen wie Flash, PDFs oder
ActiveX, sollte auch alternativen Text enthalten. Ähnlich wie Bilder ist dieser Text
wenn das Element nicht gerendert werden kann. Der alternative Text befindet sich
object-Element als normalen Text, z. B. „Jahresbericht“ unten:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Schaltflächen und Links beschriften
Schaltflächen und Links sind oft entscheidend für die Nutzererfahrung auf einer Website. beide gute barrierefreie Namen haben.
Tasten
Ein button-Element versucht immer, seinen zugänglichen Namen anhand seiner
Textinhalt. Für Schaltflächen, die nicht Teil eines form sind, sollte eine verständliche
Maßnahme erforderlich, da möglicherweise der Textinhalt ausreichen könnte, um eine gute
Namen.
<button>Book Room</button>
Eine häufige Ausnahme von dieser Regel sind Symbolschaltflächen. Eine Symbolschaltfläche kann ein Bild oder eine Symbolschrift als Textinhalt für die Schaltfläche. Beispiel: Die Schaltflächen in einem WYSIWYG-Editor (What You See Is What You Get) Text bestehen in der Regel nur aus grafischen Symbolen:
Bei der Arbeit mit Symbolschaltflächen kann es hilfreich sein,
mit dem Attribut aria-label zugänglicher Name. aria-label überschreibt beliebige
in die Schaltfläche einfügen, damit Sie die Aktion
die einen Screenreader verwenden.
<button aria-label="Left align"></button>
Links
Ähnlich wie bei Schaltflächen wird der barrierefreie Name für Links hauptsächlich aus dem Text abgeleitet Inhalte. Ein nützlicher Trick beim Erstellen eines Links besteht darin, die aussagekräftigste statt Füllwörtern wie "Hier" in den Link selbst einzufügen. oder „Lesen Mehr.“
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Dies ist besonders hilfreich für Screenreader, die Tastenkombinationen anbieten, der Links auf der Seite. Wenn die Links viele sich wiederholende Fülltexte enthalten, werden die Tastenkürzel und Tastenkombinationen viel weniger nützlich:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Formularelemente mit Labels
Es gibt zwei Möglichkeiten, ein Label mit einem Formularelement, z. B. einem Kästchen, zu verknüpfen. Bei beiden Methoden wird der Labeltext auch zu einem Klickziel für Das ist auch für Nutzer mit Maus oder Touchscreen hilfreich. Zum Verknüpfen einem Label mit einem Element, entweder
- Eingabeelement innerhalb eines label-Elements platzieren
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Alternativ können Sie das Attribut
fordes Labels verwenden und auf dasiddes Elements verweisen.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Wenn das Kontrollkästchen mit der richtigen Beschriftung versehen ist, kann der Screenreader Folgendes melden: Das Element hat die Rolle „Kästchen“, ist im Status „aktiviert“ und heißt „Empfangen“ Werbeangeboten gibt?“ wie im VoiceOver-Beispiel unten:
AUFGABE: Entwicklerwebsite – Think & Check-Test