Die Rolle der Semantik bei der Seitennavigation
Sie haben etwas über Angebote, die Semantik und darüber erfahren, wie assistive Technologien den Barrierefreiheitsbaum verwenden, um eine alternative Nutzererfahrung für ihre Nutzer zu schaffen. Wie Sie sehen, bietet das Schreiben ausdrucksstarker, semantischer HTML-Elemente mit sehr geringem Aufwand eine hohe Zugänglichkeit, da in viele Standardelemente sowohl die Semantik als auch das unterstützende Verhalten integriert sind.
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 ist es einfach, die Seite nach den gewünschten Informationen zu durchsuchen. 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 glauben oft, dass Screenreader umständlich und langsam zu bedienen sind oder dass alles auf dem Bildschirm fokussierbar sein muss, damit der Screenreader sie findet. Das ist oft nicht der Fall.
Nutzer von Screenreadern nutzen häufig eine Liste von Überschriften, um Informationen zu finden. Die meisten Screenreader haben 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 verwenden
Fassen wir zuerst einen früheren Punkt noch einmal zusammen: DOM-Reihenfolge ist entscheidend, nicht nur für die Fokusreihenfolge, sondern auch für die Screenreader-Reihenfolge. 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.
Dies gilt allgemein für Screenreader. Da Screenreader mit dem Baum für Barrierefreiheit interagieren und der Baum für die Barrierefreiheit auf dem DOM-Baum basiert, basiert die Reihenfolge, die ein Screenreader wahrnimmt, direkt auf der DOM-Reihenfolge. Eine angemessene Überschriftenstruktur ist daher wichtiger denn je.
Auf den meisten gut strukturierten Seiten sind die Überschriftenebenen verschachtelt, um hierarchische Beziehungen zwischen Inhaltsblöcken anzuzeigen. Die WebAIM-Checkliste verweist wiederholt auf diese Methode.
- Unter 1.3.1 wurde erwähnt, dass mit semantischem Markup Überschriften festgelegt werden.
- Unter 2.4.1 wird die Überschriftenstruktur als Technik zur Umgehung von Inhaltsblöcken erwähnt.
- 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, das absichtlich einige Überschriften außerhalb des Bildschirms platziert, 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 zur Aufnahme von Überschriften sein, wenn das visuelle Design keine sichtbare Überschrift benötigt oder keinen Platz für sie hat.
Andere 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 auf eine Liste mit Links auf der Seite zuzugreifen. Das ist eine einfache Möglichkeit zum Isolieren und Scannen einer Liste von Seitenüberschriften. Manchmal gibt es, wie in einem Wiki, viele Links, sodass die Leser möglicherweise innerhalb der Links nach einem Begriff suchen. Dadurch werden die Treffer auf Links beschränkt, die den Begriff tatsächlich enthalten, und nicht jedes Vorkommen des Begriffs auf der Seite.
Diese Funktion ist nur dann nützlich, wenn der Screenreader die Links finden kann und der Linktext aussagekräftig ist. Hier sind zum Beispiel einige gängige Muster, die das Auffinden von Links erschweren.
- Anchor-Tags ohne
href-Attribute. Diese Linkziele werden häufig in Single-Page-Anwendungen verwendet und verursachen Probleme für Screenreader. Weitere Informationen finden Sie in diesem Artikel zu Apps mit nur einer Seite. - Schaltflächen, die mit Links implementiert sind. Diese führen dazu, dass der Screenreader den Inhalt als Link interpretiert, wodurch die Schaltflächenfunktion verloren geht. Ersetzen Sie in diesen Fällen das Anchor-Tag durch eine echte Schaltfläche und gestalten Sie sie entsprechend.
- Bilder, die als Linkinhalte verwendet werden. Manchmal können verlinkte Bilder für Screenreader unbrauchbar sein. Damit Hilfstechnologien wie vorgesehen zugänglich sind, muss das Bild
alt-Attributtext enthalten.
Ein weiterer Fehler ist ein schlechter Linktext. Anklickbarer Text wie „Weitere Informationen“ oder „Hier klicken“ liefert keine semantischen Informationen darüber, 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 Formularkontrollliste 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 bereits an diese Merkwürdigkeit gewöhnt und berücksichtigen sie.
Einige Entwickler versuchen, dieses Problem zu lösen, indem sie phonetische Schreibweisen nur für Screenreader erstellen. Hier ist eine einfache Regel für die phonetische Schreibweise: Tun Sie das nicht, sie verschlimmert das Problem nur. Wenn ein Nutzer beispielsweise eine Braillezeile verwendet, wird das Wort falsch geschrieben, was zu mehr Verwirrung führt. Screenreader lassen die Schreibweise von Wörtern zu. Überlassen Sie es also den Lesern, die Erfahrung zu steuern und zu entscheiden, wann dies notwendig ist.
Mit dem Rotor können Leser eine Liste der Markierungen anzeigen. Diese Liste hilft Lesern, den Hauptinhalt und eine Reihe von Orientierungspunkten zur Navigation zu finden, die von HTML-Landmark-Elementen bereitgestellt werden.
In HTML5 wurden einige neue Elemente eingeführt, mit denen die semantische Struktur der Seite definiert wird, 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, beschreibendere Möglichkeit, die Seitenstruktur sowohl für Autoren als auch für Leser intuitiv auszudrücken.