Damit ein Screenreader dem Nutzer eine gesprochene Benutzeroberfläche anzeigen kann, müssen sinnvolle Elemente geeignete Labels oder Textalternativen haben. Ein Label oder eine Textalternative gibt einem Element seinen zugänglichen Namen, eine der Schlüsselattribute zum Ausdrücken der Elementsemantik in der Barrierefreiheitsstruktur.
Wenn der Name eines Elements mit der Rolle des Elements kombiniert wird, erhält der Nutzer Kontext, damit er nachvollziehen kann, mit welcher Art von Element er interagiert und wie es auf der Seite dargestellt wird. Ist kein Name vorhanden, kündigt ein Screenreader nur die Rolle des Elements an. Stellen Sie sich vor, Sie versuchen, eine Seite aufzurufen, und hören „Schaltfläche“, „Kästchen“ oder „Bild“ ohne zusätzlichen Kontext. Aus diesem Grund sind Beschriftungs- und Textalternativen so wichtig für eine gute und barrierefreie Nutzung.
Name eines Elements prüfen
Mit den Entwicklertools von Chrome können Sie ganz einfach prüfen, welcher Name für ein Element zugänglich ist:
- Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Untersuchen aus. Der Bereich „Elemente“ der Entwicklertools wird geöffnet.
- Suchen Sie im Steuerfeld „Elemente“ nach dem Bereich Bedienungshilfen. Es ist möglicherweise hinter dem Symbol
»verborgen. - Suchen Sie im Drop-down-Menü Berechnete Attribute nach der Eigenschaft Name.
Unabhängig davon, ob Sie sich ein img mit alt-Text oder ein input mit label ansehen, führen alle diese Szenarien zum selben Ergebnis: einem Element wird der zugängliche Name zugewiesen.
Auf fehlende Namen prüfen
Je nach Typ gibt es verschiedene Möglichkeiten, einem Element einen barrierefreien Namen hinzuzufügen. In der folgenden Tabelle sind die häufigsten Elementtypen aufgeführt, die barrierefreie Namen benötigen, sowie Links zu Erklärungen, wie sie hinzugefügt werden.
| Unterelementtyp | Einen Namen hinzufügen |
|---|---|
| HTML-Dokument | Dokumente und Frames mit Labels versehen |
<frame>- oder <iframe>-Elemente
|
Dokumente und Frames mit Labels versehen |
| Bildelemente | Textalternativen für Bilder und Objekte einfügen |
<input type="image">-Elemente
|
Textalternativen für Bilder und Objekte einfügen |
<object>-Elemente
|
Textalternativen für Bilder und Objekte einfügen |
| Schaltflächen | Schaltflächen und Links mit Labels versehen |
| Links | Schaltflächen und Links mit Labels versehen |
| Formularelemente | Labelformularelemente |
Labels zu Dokumenten und Frames hinzufügen
Jede Seite sollte ein title-Element enthalten, das kurz den Inhalt der Seite erläutert. Das title-Element gibt der Seite ihren zugänglichen Namen. Wenn ein Screenreader die Seite betritt, wird dieser Text zuerst vorgelesen.
Die folgende Seite hat beispielsweise den Titel „Mary's Ahornbar-Schnellbackrezept“:
<!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 die Attribute title haben:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Der Inhalt einer iframe kann ein eigenes internes title-Element enthalten. Ein Screenreader stoppt aber in der Regel an der Frame-Grenze und kündigt die Rolle des Elements – "frame" – sowie seinen zugänglichen Namen an, die durch das Attribut title bereitgestellt werden. So kann der Nutzer entscheiden, ob er den Frame betreten oder umgehen möchte.
Textalternativen für Bilder und Objekte einbeziehen
Ein img sollte immer ein alt-Attribut enthalten, um dem Image den zugänglichen Namen zu geben. Wenn das Bild nicht geladen werden kann, wird der Text alt als Platzhalter verwendet, damit Nutzer eine Vorstellung davon haben, was das Bild vermitteln wollte.
Guten alt-Text zu schreiben ist eine echte Kunst, aber es gibt einige Richtlinien, die Sie beachten können:
- Prüfen Sie, ob das Bild Inhalte enthält, die im umgebenden Text nur schwer zu erkennen wären.
- Wenn ja, formulieren Sie den Inhalt so kurz wie möglich.
Wenn das Bild als Dekoration dient und keine nützlichen Inhalte liefert, können Sie ihm ein leeres alt=""-Attribut zuweisen, um es aus der Barrierefreiheitsstruktur zu entfernen.
Bilder als Links und Eingaben
Bei einem in einen Link umschlossenen Bild sollte mit dem Attribut alt von img angegeben werden, wohin der Nutzer gelangt, 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 ein <input type="image">-Element zum Erstellen einer Bildschaltfläche verwendet wird, muss das Element alt-Text enthalten, der die Aktion beschreibt, die erfolgt, 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 normalerweise für Einbettungen wie Flash, PDFs oder ActiveX verwendet werden, sollten auch alternativen Text enthalten. Ähnlich wie bei Bildern wird dieser Text angezeigt, wenn das Element nicht gerendert werden kann. Der alternative Text wird als normaler 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. Es ist wichtig, dass beide gut zugängliche Namen haben.
Schaltflächen
Ein button-Element versucht immer, den zugänglichen Namen anhand seines Textinhalts zu berechnen. Bei Schaltflächen, die nicht Teil eines form sind, reicht es unter Umständen aus, als Textinhalt eine klare Aktion zu formulieren, um einen guten barrierefreien Namen zu erstellen.
<button>Book Room</button>
Eine häufige Ausnahme von dieser Regel sind Symbolschaltflächen. Für eine Symbolschaltfläche kann ein Bild oder eine Symbolschrift verwendet werden, um den Textinhalt für die Schaltfläche bereitzustellen. Die Schaltflächen, die in einem WYSIWYG-Editor (What You See Is What You Get) zum Formatieren von Text verwendet werden, sind normalerweise nur grafische Symbole:
Wenn Sie mit Symbolschaltflächen arbeiten, kann es hilfreich sein, ihnen mithilfe des Attributs aria-label einen explizit zugänglichen Namen zu geben. aria-label überschreibt alle Textinhalte innerhalb der Schaltfläche, sodass Sie die Aktion jedem Nutzer eines Screenreaders klar beschreiben können.
<button aria-label="Left align"></button>
Links
Ähnlich wie bei Schaltflächen erhalten Links ihren barrierefreien Namen hauptsächlich aus ihren Textinhalten. Ein kleiner Trick beim Erstellen eines Links besteht darin, den aussagekräftigsten Text in den Link selbst einzubetten, anstatt Füllwörter wie „Hier“ oder „Mehr erfahren“ 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>.
Dies ist besonders hilfreich für Screenreader, die Verknüpfungen zum Auflisten aller Links auf der Seite anbieten. Wenn Links voller sich wiederholender Fülltexte enthalten, sind diese Verknüpfungen viel weniger nützlich:
Beschriften: Formularelemente
Es gibt zwei Möglichkeiten, ein Label mit einem Formularelement wie einem Kästchen zu verknüpfen. Bei beiden Methoden wird der Labeltext auch zu einem Klickziel für das Kästchen, was auch für Maus- oder Touchscreen-Nutzer hilfreich ist. Sie haben zwei Möglichkeiten, ein Label mit einem Element zu verknüpfen:
- Eingabeelement innerhalb eines Label-Elements platzieren
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Oder verwenden Sie das Attribut
fordes Labels und verweisen Sie auf dasid-Element des Elements
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Wenn das Kästchen richtig beschriftet ist, kann der Screenreader melden, dass das Element die Rolle „Kästchen“ hat, sich im Status „aktiviert“ befindet und wie im VoiceOver-Beispiel unten als „Angebote erhalten“ bezeichnet:
AUFGABE: DevSite - Think and Check-Bewertung