Wie Überschriften und Orientierungspunkte die Barrierefreiheit verbessern

How Headings and Landmarks Help Accessibility

Das Einrichten einer soliden Seitenstruktur und eines soliden Designs für jede Website oder App ist der Schlüssel zum Aufbau einer barrierefreien Erfahrung. Die Seitenstruktur besteht aus Überschriften und Orientierungselementen , die Benutzern von Screenreadern helfen, das Layout und den Inhalt der Seite auf hoher Ebene zu verstehen.

Überschriften

Wenn wir von einer „Überschrift“ sprechen, beziehen wir uns auf die größeren Textabschnitte, die einen neuen Inhaltsabschnitt der Seite bezeichnen, der oft im Fließtext zu finden ist, nicht auf die „Kopfzeile“ der Website, die typischerweise aus dem Logo und der Navigation usw. besteht .

Menschen, die auf Hilfstechnologien angewiesen sind, navigieren oft zuerst nach Überschriften.

Es ist wichtig, dass der Code, aus dem die Überschriftenstruktur besteht, linear und in einer logischen Reihenfolge ist. Wenn jemand, der auf Hilfstechnologien angewiesen ist, eine neue Website oder Seite besucht, auf der er noch nie zuvor war, navigiert er oft zuerst nach Überschriften, um einen Eindruck von den auf der Seite angebotenen Inhalten zu bekommen.

Die Menü-Analogie

Hier ist eine Möglichkeit, über Überschriftenebenen nachzudenken. Stellen Sie sich vor, Sie sind zum ersten Mal in einem neuen Restaurant. Jemand kann Sie zu Ihrem Tisch führen, Sie nehmen Platz und holen sich ein Menü. Denken Sie jetzt darüber nach, wie Sie versuchen könnten, einzugrenzen, was Sie gerne hätten.

  1. Erstens könnte das Cover der Speisekarte den Namen des Restaurants haben. Dies ist die Bestätigung, dass Sie am richtigen Ort sind und bereit sind, in das Menü einzutauchen. Der Restaurantname könnte als Überschrift Ebene 1 ( h1 ) gedacht werden, das Hauptthema der Seite. Super, weiter gehts.
  2. Als Nächstes überprüfen Sie die Kategorien der auf der Speisekarte verfügbaren Mahlzeiten: Vorspeisen, Salate, Sandwiches, Burger, Pizza, Kindermenü usw. Die Kategorietitel könnten als Überschriftenebene 2 ( h2 ) angesehen werden, da sie einen großen Teil des Inhalts auf der darstellen Speisekarte.
  3. Wenn Sie hungrig sind, tauchen Sie in die Pizza-Kategorie ein. Einfacher Käse, Peperoni, Gemüse, Fleischliebhaber, hawaiianisch (ja bitte). Diese stellen Artikel dar, die in der Pizza-Kategorie verfügbar sind. Daher könnte jeder Artikeltitel als Überschrift der Ebene 3 ( h3 ) betrachtet werden. Inhalte, die die Pizza beschreiben, wären Klartext unter dieser Überschrift.

    Wenn der letzte Pizzaartikel gelesen wird und Sie sich entscheiden, stattdessen nachzusehen, was unter der Kategorie Meeresfrüchte ist, führt uns dies zurück zu "Meeresfrüchte", Überschriftenebene 2 ( h2 ), mit einem Drilldown zu den Artikeln ( h3 ) und so weiter bis Sie treffen Ihre köstliche Wahl!

Genauso wie jemand, der sich durch ein Menü navigiert, navigieren Screenreader-Benutzer auch auf Webseiten, auf denen sie noch nie zuvor waren. Die Überschriftennavigation ist eine verfügbare Methode, um schnell einen Überblick über den Inhalt der Seite zu erhalten und zu entscheiden, ob Sie zu einem interessanten Abschnitt zurückkehren oder weitergehen möchten.

Die logische Reihenfolge der Überschriften ist der Schlüssel

In Ihrem HTML würden Sie mit einer einzelnen h1 -Überschrift als Haupttitel der Seite beginnen, gefolgt von einer h2 -Überschrift für jeden größeren Unterabschnitt des Inhalts. Wenn es Unter-Unterabschnitte gäbe, würden diese h3 -Überschriften enthalten und so weiter. Wenn ein Inhaltsabschnitt vollständig ist, kehrt die Überschrift zur entsprechenden vorherigen Ebene zurück, um den neuen Abschnitt zu beginnen.

 <h1>Primary heading</h1> <!-- ... -->​ <h2>Section</h2> <!-- ... -->​ <h3>Sub-section</h3> <!-- ... -->​ <h2>Section</h2>

Screenshot der Startseite von Shopify.com mit geöffneten Devtools, die eine 3-Stunden-Überschrift untersuchen.

Neben dem HTML-Code, der die semantische Bedeutung hinter den Überschriften vermittelt, ist auch die visuelle Gestaltung der Überschriften sehr wichtig. Textgrößen, die von groß über mittel bis klein reichen, zeigen visuell die Inhaltsstruktur und verwandte Inhalte an. Menschen mit einer kognitiven Beeinträchtigung oder einer Lese-/Lernbehinderung werden es sehr zu schätzen wissen, dass Inhalte in Teile mit Überschriften aufgeteilt sind, die die Botschaft vermitteln: „Dies ist ein neuer Inhaltsbereich.“

Ohne Überschriften können große Inhaltswände für manche Menschen ziemlich schwierig zu konsumieren sein und sogar zu einem Gefühl der Überforderung führen.

Beispiele

Schauen Sie sich diese Beispiele an. Beachten Sie die verbesserte Lesbarkeit und das Verständnis des Textes, wenn die Überschriften zum Dokument hinzugefügt werden. Wenn HTML-Überschriften richtig verwendet werden, können Screenreader-Benutzer außerdem die Seitenstruktur besser verstehen.

WCAG-Erfolgskriterien

Dies kommt auf 2.4.6 Überschriften und Beschriftungen zurück, wo es heißt:

"Überschriften und Labels beschreiben Thema oder Zweck."

Sehenswürdigkeiten

Landmarken sind die HTML-Elemente, die die Gesamtstruktur einer kompletten Seite definieren. Eine typische Webseite kann Abschnitte wie eine obere Leiste mit einem Überschriftenlogo, eine Hauptnavigation, eine Seitenleiste mit mehr Navigation oder zusätzlichen verwandten Inhalten, einen Fußzeilenabschnitt und natürlich den Hauptinhalt enthalten.

Als Ergebnis haben wir jetzt mit HTML5 spezifische Elemente, die die semantische Bedeutung für jeden Abschnitt aufweisen.

Auf hoher Ebene bestehen die wegweisenden Elemente aus:

Element Rolle Anmerkungen
header banner Typischerweise das erste Orientierungselement im DOM, das das Hauptlogo, die primäre Navigation und manchmal ein Suchformular enthält.
footer contentinfo Typischerweise das letzte Element im DOM, das Links und Copyright-Informationen enthält.
aside complimentary Enthält Inhalte im Zusammenhang mit dem Artikel oder der Website im Allgemeinen.
nav navigation Wird verwendet, um Navigationsbereiche zu kennzeichnen.
main main Der Hauptinhaltsbereich der Seite, der normalerweise als gleichgeordnetes Element der header und footer zu finden ist.
section Der einzige Orientierungspunkt ohne expliziten role ist ein generisches Element, das zum Abtrennen von Inhalten wie Teilen einer Seite oder eines Artikels verwendet wird.

Genau wie bei Überschriften können Personen, die einen Screenreader verwenden, Seiteninhalte entdecken, indem sie ausschließlich über Landmark-Elemente navigieren. Auf diese Weise können Benutzer schnell zu verschiedenen Abschnitten der Seite springen, ohne sich durch Inhalte wühlen zu müssen, die nichts mit ihrer aktuellen Aufgabe zu tun haben.

Daher ist es wichtig zu verstehen und zu wissen, wie man sowohl Überschriften als auch Orientierungspunkte so verwendet, dass es für Menschen, die auf Hilfstechnologien angewiesen sind, nützlich und hilfreich ist.

Ressourcen:

Zurück zum Blog