Damit ein Screenreader dem Nutzer eine gesprochene Benutzeroberfläche präsentieren kann, müssen aussagekräftige Elemente ordnungsgemäße Labels oder Textalternativen haben. Ein Label oder eine Textalternative gibt einem Element seinen barrierefreien Namen. Dies ist eine der wichtigsten Eigenschaften, um die Elementsemantik im Baum für Barrierefreiheit auszudrücken.
Wenn der Name eines Elements mit seiner Rolle kombiniert wird, erhalten Nutzer Kontext, damit sie verstehen können, mit welcher Art von Element sie interagieren und wie es auf der Seite dargestellt wird. Wenn kein Name vorhanden ist, liest ein Screenreader nur die Rolle des Elements vor. Stellen Sie sich vor, Sie versuchen, eine Seite zu bedienen, und hören ohne zusätzlichen Kontext „Schaltfläche“, „Kästchen“ oder „Bild“. Aus diesem Grund sind Labels und Textalternativen für eine gute, barrierefreie Nutzung entscheidend.
Namen eines Elements prüfen
Mit den Chrome DevTools können Sie den barrierefreien Namen eines Elements ganz einfach prüfen:
- Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Untersuchen aus. Daraufhin wird der Bereich „Elemente“ in den DevTools geöffnet.
- Suchen Sie im Bereich „Elemente“ nach dem Bereich Bedienungshilfen. Möglicherweise ist es hinter einem
»-Symbol versteckt. - Suchen Sie im Drop-down-Menü Berechnete Attribute nach der Eigenschaft Name.
Ganz gleich, ob Sie sich eine img mit alt-Text oder eine input mit einem label ansehen, alle diese Szenarien führen zum selben Ergebnis: Sie geben einem Element seinen barrierefreien Namen.
Auf fehlende Namen prüfen
Je nach Elementtyp gibt es verschiedene Möglichkeiten, einen barrierefreien Namen hinzuzufügen. In der folgenden Tabelle sind die häufigsten Elementtypen aufgeführt, für die barrierefreie Namen erforderlich sind, sowie Links zu Erklärungen dazu, wie sie hinzugefügt werden.
| Elementtyp | Namen hinzufügen |
|---|---|
| HTML-Dokument | Dokumente und Frames labeln |
<frame>- oder <iframe>-Elemente
|
Dokumente und Frames labeln |
| Bildelemente | Geben Sie Textalternativen für Bilder und Objekte an. |
<input type="image">-Elemente
|
Geben Sie Textalternativen für Bilder und Objekte an. |
<object>-Elemente
|
Geben Sie Textalternativen für Bilder und Objekte an. |
| Tasten | Schaltflächen und Links für Labels |
| Links | Schaltflächen und Links für Labels |
| Formularelemente | Label für Formularelemente |
Dokumente und Frames beschriften
Jede Seite sollte ein title-Element enthalten, das kurz erklärt, worum es auf der Seite geht. Das title-Element gibt der Seite ihren barrierefreien Namen. Wenn ein Screenreader die Seite betritt, ist dies der erste Text, der vorgelesen wird.
Die folgende Seite hat beispielsweise den Titel „Mary's Maple Bar Fast-Baking Recipe“:
<!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>
Der Inhalt eines iframe kann zwar ein eigenes internes title-Element enthalten, ein Screenreader hält jedoch in der Regel an der Frame-Grenze an und liest die Rolle des Elements („frame“) und seinen barrierefreien Namen vor, der vom title-Attribut bereitgestellt wird. So kann der Nutzer entscheiden, ob er den Frame betreten oder umgehen möchte.
Textalternativen für Bilder und Objekte angeben
Ein img sollte immer mit einem alt-Attribut kombiniert werden, um dem Bild einen barrierefreien Namen zu geben. Wenn das Bild nicht geladen werden kann, wird der alt-Text als Platzhalter verwendet, damit Nutzer eine Vorstellung davon haben, was das Bild ausdrücken soll.
Gute alt-Texte zu verfassen, ist eine kleine Kunst. Es gibt jedoch einige Richtlinien, die Sie beachten können:
- Prüfen Sie, ob das Bild Inhalte enthält, die sonst nur schwer aus dem umgebenden Text zu erschließen wären.
- Wenn ja, formulieren Sie den Inhalt so prägnant wie möglich.
Wenn das Bild nur zur Dekoration dient und keine nützlichen Inhalte enthält, können Sie ihm ein leeres alt=""-Attribut zuweisen, um es aus dem Baum für Barrierefreiheit zu entfernen.
Bilder als Links und Eingaben
Für ein Bild, das in einen Link eingebunden ist, sollte das alt-Attribut von img verwendet werden, um zu beschreiben, wohin der Nutzer weitergeleitet wird, wenn er auf den Link klickt:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Wenn Sie mit einem <input type="image">-Element eine Bildschaltfläche erstellen, sollte sie ebenfalls alt-Text enthalten, der die Aktion beschreibt, die ausgeführt wird, wenn der Nutzer 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 eingebettete Inhalte wie Flash, PDFs oder ActiveX verwendet werden, sollten ebenfalls alternativen Text enthalten. Ähnlich wie bei Bildern wird dieser Text angezeigt, wenn das Element nicht gerendert werden kann. Der alternative Text wird als regulärer Text in das object-Element eingefügt, 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 Nutzerfreundlichkeit einer Website. Daher ist es wichtig, dass beide gut zugängliche Namen haben.
Tasten
Bei einem button-Element wird immer versucht, den barrierefreien Namen anhand des Textinhalts zu berechnen. Bei Schaltflächen, die nicht zu einer form gehören, reicht es möglicherweise aus, eine klare Aktion als Textinhalt zu verwenden, um einen gut zugänglichen Namen zu erstellen.
<button>Book Room</button>
Eine häufige Ausnahme von dieser Regel sind Symbolschaltflächen. Bei einer Symbolschaltfläche kann ein Bild oder eine Symbolschriftart für den Textinhalt der Schaltfläche verwendet werden. Die Schaltflächen, die in einem WYSIWYG-Editor (What You See Is What You Get) zum Formatieren von Text verwendet werden, sind beispielsweise in der Regel nur grafische Symbole:
Bei der Arbeit mit Symbolschaltflächen kann es hilfreich sein, ihnen mit dem Attribut aria-label einen explizit barrierefreien Namen zu geben. aria-label überschreibt den Textinhalt in der Schaltfläche. So können Sie die Aktion für alle Nutzer mit einem Screenreader klar beschreiben.
<button aria-label="Left align"></button>
Links
Ähnlich wie bei Schaltflächen wird der für Screenreader zugängliche Name von Links hauptsächlich aus dem Textinhalt abgeleitet. Ein guter Trick beim Erstellen eines Links besteht darin, den aussagekräftigsten Text in den Link selbst einzufügen, anstatt Füllwörter wie „Hier“ oder „Weitere Informationen“ zu verwenden.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Das ist besonders hilfreich für Screenreader, die Tastenkürzel zum Auflisten aller Links auf der Seite bieten. Wenn Links voller sich wiederholender Fülltexte sind, sind diese Tastenkürzel viel weniger nützlich:
Labelelemente
Es gibt zwei Möglichkeiten, ein Label mit einem Formularelement wie einem Kästchen zu verknüpfen. Bei beiden Methoden wird der Labeltext auch zum Klickziel für das Kästchen, was auch für Nutzer mit Maus oder Touchscreen hilfreich ist. So verknüpfen Sie ein Label mit einem Element:
- Platzieren Sie das Eingabeelement in einem Labelelement.
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Sie können auch das
for-Attribut des Labels verwenden und auf dasid-Attribut des Elements verweisen.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Wenn das Kästchen richtig beschriftet ist, kann der Screenreader angeben, dass das Element die Rolle „Kästchen“ hat, aktiviert ist und den Namen „Werbeangebote erhalten?“ trägt, wie im folgenden VoiceOver-Beispiel:
TODO: DevSite – Bewertung „Überlegen und prüfen“