Semantik und Navigation in Inhalten

Die Rolle der Semantik bei der Seitennavigation

Alice Boxhall

Dave Gash

Meggin Kearney

Sie haben sich mit Angeboten, Semantik und der Verwendung des Baums für Barrierefreiheit durch Hilfstechnologien vertraut gemacht, um eine alternative Nutzererfahrung zu schaffen. Sie sehen, dass ausdrucksstarkes, semantisches HTML Ihnen mit wenig Aufwand eine hohe Barrierefreiheit bietet, da viele Standardelemente sowohl die Semantik als auch das unterstützende Verhalten enthalten.

In dieser Lektion geht es um 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 leicht überfliegen, um das Gesuchte zu finden. Bei einer inhaltsreichen Seite wie einem Wikipedia-Eintrag oder einem Nachrichtenaggregator ist es jedoch nicht praktisch, alles von oben nach unten durchzulesen. Sie benötigen eine Möglichkeit, sich effizient durch die Inhalte zu bewegen.

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 für diese Funktion nutzen können.

Ü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, stellen Sie fest, dass die Überschriftenliste der DOM-Reihenfolge und nicht der visuellen Reihenfolge folgt.

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. Das bedeutet, dass eine angemessene Überschriftenstruktur wichtiger denn je ist.

Auf den meisten gut strukturierten Seiten sind die Überschriftenebenen verschachtelt, um übergeordnete und untergeordnete Beziehungen zwischen Inhaltsblöcken anzugeben. 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
• 2.4.6 enthält einige Details zum Verfassen hilfreicher Überschriften
• 2.4.10 besagt: „Einzelne Inhaltsabschnitte sind gegebenenfalls mit Überschriften gekennzeichnet.“

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>

Hinweis : Auf der WebAIM-Website wird diese Technik ausführlich in diesem Artikel zu Offscreen-Inhalten beschrieben.

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 hat.

Achtung: Achten Sie darauf, diese Technik nicht zu übertreiben. Denken Sie daran, dass Nutzer von Hilfstechnologien möglicherweise auch den Bildschirm selbst sehen können. Wenn Sie also zu sehr auf die Erstellung von Inhalten für Screenreader ausrichten, kann dies die Nutzerfreundlichkeit für einige Nutzer beeinträchtigen. Außerdem kann das später zu Problemen bei der Wartung führen.

Weitere Navigationsoptionen

Seiten mit guten Überschriften erleichtern Nutzern von Screenreadern die Navigation. Es gibt jedoch noch andere Elemente, mit denen sie sich auf einer Seite bewegen können, 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 kann und der Linktext aussagekräftig ist. Hier einige Beispiele für gängige Muster, die Links schwer zu finden machen:

• 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ächenfunktionalität 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 der Link für Hilfstechnologien richtig angezeigt wird, muss das Bild das alt-Attribut enthalten.

Ein weiteres Problem ist unzureichender 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 zu responsivem Design“ oder „Dieses Canvas-Tutorial ansehen“, damit Screenreader Nutzern einen sinnvollen Kontext zu Links bieten können.

Der Rotor kann auch eine Liste mit Formularelementen abrufen. Anhand dieser Liste können Leser nach bestimmten Elementen suchen und direkt dorthin springen.

Ein häufiger Fehler von Screenreadern ist die Aussprache. So kann ein Screenreader beispielsweise „Udacity“ als „oo-dacity“ aussprechen, eine Telefonnummer als große Ganzzahl oder Großbuchstaben als Akronym. Interessanterweise sind Nutzer von Screenreadern an diese Eigenheit gewöhnt und berücksichtigen sie.

Einige Entwickler versuchen, diese Situation zu verbessern, indem sie nur für Screenreader lesbaren 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. Screenreader können Wörter laut vorlesen. Lassen Sie es also dem Nutzer überlassen, wie er die App verwenden und wann dies erforderlich ist.

Leser können mit dem Rotor eine Liste der Sehenswürdigkeiten aufrufen. Diese Liste hilft Lesern, den Hauptinhalt und eine Reihe von Navigationspunkten zu finden, die durch HTML-Landmark-Elemente 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 insbesondere strukturelle Hinweise auf der Seite, ohne ein integriertes Design zu erzwingen (was Sie mit CSS ohnehin 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.