Die Rolle der Semantik bei der Seitennavigation
Sie haben sich mit Angeboten, Semantik und der Verwendung des Baums für Barrierefreiheit durch Hilfstechnologien vertraut gemacht, um eine alternative User Experience für Nutzer zu schaffen. Sie sehen, dass Sie mit ausdrucksstarkem, semantischem HTML mit sehr wenig Aufwand eine hohe Barrierefreiheit erreichen, da viele Standardelemente sowohl die Semantik als auch das unterstützende Verhalten enthalten.
In dieser Lektion geht es um eine weniger offensichtliche Semantik, die für Nutzer von Screenreadern sehr wichtig ist, insbesondere in Bezug auf die Navigation. Auf einer einfachen Seite mit vielen Steuerelementen, aber wenig Inhalt, können Sie die Seite ganz einfach überfliegen, um das Gesuchte zu finden. Auf einer inhaltsreichen Seite wie einem Wikipedia-Eintrag oder einem Nachrichten-Aggregator ist es jedoch nicht praktikabel, alles von oben nach unten zu lesen. Sie benötigen eine Möglichkeit, um effizient durch die Inhalte zu navigieren.
Entwickler haben oft die falsche Vorstellung, dass Screenreader mühsam und langsam zu bedienen sind oder dass alles auf dem Bildschirm fokussiert werden muss, damit der Screenreader es findet. Das ist oft nicht der Fall.
Screenreader-Nutzer verlassen sich häufig auf eine Liste von Überschriften, um Informationen zu finden. Die meisten Screenreader bieten einfache Möglichkeiten, eine Liste von Seitenüberschriften zu isolieren und zu scannen. Diese wichtige Funktion wird als Rotor bezeichnet. Sehen wir uns an, wie wir HTML-Überschriften effektiv einsetzen können, um diese Funktion zu unterstützen.
Überschriften effektiv einsetzen
Zuerst noch einmal ein früherer Punkt: Die DOM-Reihenfolge ist wichtig, nicht nur für die Reihenfolge des Fokus, sondern auch für die Reihenfolge des Screenreaders. Wenn Sie mit Screenreadern wie VoiceOver, NVDA, JAWS und ChromeVox experimentieren, werden Sie feststellen, dass die Überschriftenliste der DOM-Reihenfolge entspricht und nicht der visuellen Reihenfolge.
Das gilt für Screenreader im Allgemeinen. Da Screenreader mit der Baumansicht für Barrierefreiheit interagieren und diese auf dem DOM-Baum basiert, basiert die Reihenfolge, die ein Screenreader wahrnimmt, direkt auf der DOM-Reihenfolge. Daher ist eine geeignete Überschriftenstruktur wichtiger denn je.
Auf den meisten gut strukturierten Seiten sind die Überschriftenebenen verschachtelt, um hierarchische Beziehungen zwischen Inhaltsblöcken anzuzeigen. In der WebAIM-Checkliste wird diese Technik wiederholt erwähnt.
- Unter 1.3.1 wird erwähnt, dass „semantisches Markup zum Bezeichnen von Überschriften verwendet wird“.
- 2.4.1 erwähnt die Überschriftenstruktur als Methode zum Umgehen von Inhaltsblöcken
- Unter 2.4.6 werden einige Details zum Schreiben nützlicher Überschriften erläutert.
- In 2.4.10 heißt es, dass einzelne Inhaltsabschnitte gegebenenfalls mit Überschriften gekennzeichnet werden.
Nicht alle Überschriften müssen auf dem Bildschirm sichtbar sein. Wikipedia verwendet beispielsweise ein Verfahren, bei dem einige Überschriften bewusst außerhalb des Bildschirms platziert werden, um sie nur für Screenreader und andere Hilfstechnologien zugänglich zu machen.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Bei komplexen Anwendungen kann dies eine gute Möglichkeit sein, Überschriften zu berücksichtigen, wenn das visuelle Design keine sichtbare Überschrift erfordert oder dafür keinen Platz bietet.
Weitere Navigationsoptionen
Obwohl Seiten mit guten Überschriften den Nutzern von Screenreadern die Navigation erleichtern, können sie zum Navigieren auf einer Seite auch andere Elemente verwenden, z. B. Links, Formularsteuerelemente und Markierungen.
Leser können die Rotorfunktion des Screenreaders verwenden, um eine Liste der Seitenüberschriften zu isolieren und zu scannen. So können sie auf eine Liste der Links auf der Seite zugreifen. Manchmal gibt es, wie in einem Wiki, viele Links, sodass der Leser in den Links nach einem Begriff suchen kann. Dadurch werden die Treffer auf Links beschränkt, die den Begriff tatsächlich enthalten, und nicht auf alle Vorkommen des Begriffs auf der Seite.
Diese Funktion ist nur nützlich, wenn der Screenreader die Links finden und der Linktext aussagekräftig ist. Hier sind zum Beispiel einige gängige Muster, die das Auffinden von Links erschweren.
- Anker-Tags ohne
href-Attribute Diese Linkziele werden häufig in einseitigen Anwendungen verwendet und verursachen Probleme für Screenreader. Weitere Informationen zu Single-Page-Apps - Schaltflächen, die mit Links implementiert sind. Dadurch interpretiert der Screenreader den Inhalt als Link und die Schaltflächenfunktion geht verloren. Ersetzen Sie in diesen Fällen das Anker-Tag durch eine echte Schaltfläche und gestalten Sie sie entsprechend.
- Bilder, die als Linkinhalt verwendet werden. Manchmal notwendige verlinkte Bilder können für Screenreader nicht verwendet werden. Damit Hilfstechnologien wie vorgesehen zugänglich sind, muss das Bild
alt-Attributtext enthalten.
Ein weiterer Fehler ist ein schlechter Linktext. Klickbarer Text wie „Weitere Informationen“ oder „Hier klicken“ enthält keine semantischen Informationen dazu, wohin der Link führt. Verwenden Sie stattdessen beschreibenden Text wie „Weitere Informationen zum Responsive Design“ oder „Diese Canvas-Anleitung ansehen“, damit Screenreader sinnvollen Kontext zu Links bereitstellen können.
Der Rotor kann auch eine Liste mit Formularelementen abrufen. Mit dieser Liste können Leser nach bestimmten Elementen suchen und sie direkt aufrufen.
Ein häufig auftretender Fehler, den Screenreader ausführen, ist die Aussprache. Beispielsweise könnte ein Screenreader „Udacity“ als „oo-dacity“ aussprechen, eine Telefonnummer als große Ganzzahl lesen oder groß geschriebenen Text so lesen, als wäre es ein Akronym. Interessanterweise sind Nutzer von Screenreadern an diese Schwierigkeit gewöhnt und berücksichtigen sie.
Einige Entwickler versuchen, diese Situation zu verbessern, indem sie nur für Screenreader sichtbaren Text zur Verfügung stellen, der phonetisch geschrieben ist. Hier ist eine einfache Regel für die phonetische Schreibweise: Verwenden Sie sie nicht. Sie verschlimmert das Problem nur. Wenn ein Nutzer beispielsweise ein Braillezeilengerät verwendet, wird das Wort falsch geschrieben, was zu mehr Verwirrung führt. Bei Screenreadern können Wörter laut vorgelesen werden. Überlassen Sie es also den Lesern, um zu entscheiden, wann sie verwendet werden sollen.
Leser können mit dem Rotor eine Liste der Sehenswürdigkeiten aufrufen. Diese Liste hilft Lesern, den Hauptinhalt und eine Reihe von Orientierungspunkten zur Navigation zu finden, die von HTML-Landmark-Elementen bereitgestellt werden.
Mit HTML5 wurden einige neue Elemente eingeführt, die dazu beitragen, die semantische Struktur der Seite zu definieren, darunter header, footer, nav, article, section, main und aside. Diese Elemente liefern spezifische Hinweise zur Strukturierung der Seite, ohne integrierte Stile zu erzwingen (was Sie trotzdem mit CSS tun sollten).
Semantische Strukturelemente ersetzen mehrere sich wiederholende div-Blöcke und bieten eine klarere, aussagekräftigere Möglichkeit, die Seitenstruktur sowohl für Autoren als auch für Leser intuitiv auszudrücken.