Semantik und Navigation in Inhalten

Die Rolle der Semantik bei der Seitennavigation

Alice Boxhall

Dave Gash

Meggin Kearney

Sie haben etwas über Angebote, Semantik und darüber erfahren, wie assistive Technologien mithilfe des Baums für Barrierefreiheit eine alternative User Experience für Nutzer schaffen. Wie Sie sehen, bietet das Schreiben von ausdrucksstarkem, semantischem HTML viele Barrierefreiheit mit sehr geringem Aufwand, da viele Standardelemente sowohl über die Semantik als auch über das unterstützende Verhalten verfügen.

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 nur mit wenig Inhalt, lässt sich die Seite ganz einfach durchsuchen, um das Gesuchte zu finden. Auf einer Seite mit vielen Inhalten, z. B. einem Wikipedia-Eintrag oder einem Nachrichten-Aggregator, ist es jedoch nicht zweckmäßig, alles von oben nach unten durchzulesen. Sie brauchen eine Möglichkeit, effizient durch die Inhalte zu navigieren.

Entwickler glauben oft, dass Screenreader mühsam und langsam zu bedienen sind oder dass alles auf dem Bildschirm fokussierbar sein muss, damit der Screenreader ihn finden kann. Das ist oft nicht der Fall.

Nutzer von Screenreadern verlassen sich oft 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. Dies ist eine wichtige Funktion, die als Rotor bezeichnet wird. Sehen wir uns an, wie wir HTML-Überschriften effektiv nutzen können, um diese Funktion zu unterstützen.

Überschriften effektiv verwenden

Lassen Sie uns zuerst einen früheren Punkt wiederholen: Die DOM-Reihenfolge ist wichtig, nicht nur für die Fokusreihenfolge, sondern 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 und nicht der visuellen Reihenfolge folgt.

Dies gilt allgemein für Screenreader. Da Screenreader mit dem Baum für Barrierefreiheit interagieren und dieser auf dem DOM-Baum basiert, richtet sich die Reihenfolge, die ein Screenreader erkennt, 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 wiederholt auf diese Technik verwiesen.

• 1.3.1 erwähnt: „Semantisches Markup wird verwendet, um Überschriften zu kennzeichnen“.
• In 2.4.1 wird die Überschriftsstruktur zum Umgehen von Inhaltsblöcken erwähnt.
• In 2.4.6 werden einige Details zum Schreiben nützlicher Überschriften erläutert.
• 2.4.10 lautet: „Einzelne Inhaltsbereiche werden gegebenenfalls mit Überschriften gekennzeichnet.“

Nicht alle Überschriften müssen auf dem Bildschirm sichtbar sein. Wikipedia verwendet zum Beispiel eine Technik, bei der einige Überschriften absichtlich 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 in diesem Artikel zu nicht sichtbaren Inhalten ausführlich beschrieben.

Bei komplexen Anwendungen kann dies eine gute Möglichkeit sein, Überschriften unterzubringen, wenn das visuelle Design keine sichtbare Überschrift erfordert oder Platz für eine solche bietet.

Achtung :Es ist wichtig, dass Sie bei dieser Technik nicht übertreibt. Nutzer von Hilfstechnologien können den Bildschirm möglicherweise auch für sich selbst sehen. Wenn Sie also zu sehr „Nur Screenreader“-Inhalte erstellen, kann dies die Nutzererfahrung für einige Nutzer beeinträchtigen. Das kann Ihnen später auch Wartungsarbeiten ersparen.

Weitere Navigationsoptionen

Obwohl Seiten mit guten Überschriften Screenreader-Nutzern bei der Navigation helfen, können sie mit anderen Elementen auf einer Seite navigieren, z. B. Links, Formularsteuerelemente und Orientierungspunkte.

Leser können die Rotorfunktion des Screenreaders verwenden, um auf eine Liste mit Links auf der Seite zuzugreifen. Eine einfache Möglichkeit zum Isolieren und Scannen einer Liste von Seitenüberschriften. Manchmal gibt es, wie bei einem Wiki, viele Links, sodass die Leser möglicherweise nach einem Begriff in den Links suchen. Dadurch werden die Treffer auf Links beschränkt, die den Begriff tatsächlich enthalten, und nicht auf 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 einige häufige Muster, die das Auffinden von Links erschweren.

• Anchor-Tags ohne href-Attribute. Diese Linkziele werden häufig in Anwendungen mit einer Seite verwendet und verursachen Probleme bei Screenreadern. Weitere Informationen finden Sie in diesem Artikel zu einseitigen Apps.
• Schaltflächen, die mit Links implementiert werden. Diese führen dazu, dass der Screenreader den Inhalt als Link interpretiert und die Schaltfläche nicht mehr funktioniert. Ersetzen Sie in diesen Fällen das Anchor-Tag durch eine echte Schaltfläche und passen Sie den Stil entsprechend an.
• Als Linkinhalt verwendete Bilder. Manchmal sind verlinkte Bilder für Screenreader unbrauchbar. Achte darauf, dass das Bild den Attributtext alt enthält, damit der Link ordnungsgemäß von Hilfstechnologien genutzt werden kann.

Schlechter Linktext ist ein weiteres Problem. Anklickbarer Text wie „Weitere Informationen“ oder „Klicken Sie hier“ liefert keine semantischen Informationen darüber, wohin der Link führt. Verwenden Sie stattdessen beschreibenden Text wie „Weitere Informationen über responsives Design“ oder „Siehe dieses Canvas-Tutorial“, um Screenreadern zu helfen, sinnvollen Kontext zu Links bereitzustellen.

Über den Rotor kann auch eine Formularsteuerungsliste abgerufen werden. Mithilfe dieser Liste können Leser nach bestimmten Artikeln suchen und sie direkt aufrufen.

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

Einige Entwickler versuchen, dieses Problem zu beheben, indem sie nur für Screenreader Text in der phonetischen Schreibweise bereitstellen. Hier ist eine einfache Regel für die phonetische Schreibweise: Lass das nicht. Es macht das Problem nur noch schlimmer. Wenn ein Nutzer beispielsweise eine Braillezeile verwendet, wird das Wort falsch geschrieben, was zu Verwirrung führt. Screenreader ermöglichen die Schreibweise von Wörtern. Überlassen Sie dies also dem Leser, um seine Nutzung zu steuern und zu entscheiden, wann dies erforderlich ist.

Leser können den Rotor verwenden, um eine Liste der Sehenswürdigkeiten aufzurufen. Mithilfe dieser Liste können Leser den Hauptinhalt und eine Reihe von Orientierungspunkten für die Navigation finden, die von HTML-Landmark-Elementen bereitgestellt werden.

Mit HTML5 wurden neue Elemente eingeführt, mit denen die semantische Struktur der Seite definiert werden kann, darunter header, footer, nav, article, section, main und aside. Diese Elemente liefern speziell strukturelle Hinweise auf der Seite, ohne einen integrierten Stil zu erzwingen. Dies sollten Sie sowieso bei CSS tun.

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.