Überschriften und Orientierungspunkte

Rob Dodson

Screenreader haben Befehle, mit denen man schnell zwischen Überschriften wechseln oder bestimmte Sehenswürdigkeiten. Tatsächlich Umfrage unter Nutzern von Screenreadern stellte fest, dass sie am häufigsten auf einer unbekannten Seite Überschriften.

Durch die Verwendung korrekter Überschriften- und Orientierungselemente können Sie die Navigation auf Ihrer Website für Nutzer von Hilfstechnologien zu verbessern.

Gliederung der Seite mit Überschriften

Mit h1-h6-Elementen kannst du eine strukturelle Gliederung für deine Seite erstellen. Das Ziel ist, ein Gerüst der Seite zu erstellen, sodass alle, die zwischen Überschriften können ein mentales Bild bilden.

Häufig wird nur ein einziges h1-Element für den primären Anzeigentitel oder das primäre Logo auf einem Seite, h2-Elemente zur Bezeichnung von Hauptabschnitten und h3-Elemente in unterstützenden Unterabschnitten:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

Überschriftenebenen nicht überspringen

Entwickler überspringen Überschriften oft, um die Standardformate des Browsers zu verwenden, zum Design passen. Dies gilt als Anti-Muster, weil es bricht. das Umrissemodell.

Verwenden Sie für Überschriften nicht die standardmäßige Schriftgröße des Browsers, eigenen CSS-Code und überspringen keine Ebenen.

Diese Website enthält beispielsweise einen Abschnitt namens "IN THE NEWS", gefolgt von zwei Anzeigentitel:

Eine Nachrichtenwebsite mit einer Überschrift, einem Hero-Image und Unterbereichen

Die Abschnittsüberschrift "IN THE NEWS" könnte ein h2 sein und die unterstützenden Anzeigentitel können beide h3-Elemente sein.

Weil die font-size für „IN THE NEWS“ kleiner als der Anzeigentitel ist, ist es verlockend, die Schlagzeile des ersten Artikels auf h2 zu setzen und „IN THE NEWS“ ein h3. Das mag zwar dem Standardstil des Browsers entsprechen, würde dies die Gliederung unterbrechen, die der Nutzer eines Screenreaders vermittelt.

Mit Lighthouse können Sie prüfen, ob auf Ihrer Seite Überschriftenebenen übersprungen werden. Führen Sie den Prüfung der Barrierefreiheit (Lighthouse > Optionen > Bedienungshilfen) und prüfen Sie für die Ergebnisse der Prüfung Überschriften werden nicht übersprungen.

Orientierungspunkte verwenden, um die Navigation zu erleichtern

HTML5-Elemente wie main, nav und aside fungieren als Markierungen oder spezielle Bereiche auf der Seite, zu denen ein Screenreader springen kann.

Mit Tags für Sehenswürdigkeiten können Sie wichtige Bereiche Ihrer Seite definieren, div Sek. Überschreiten Sie nichts, denn zu viele Orientierungspunkte können sind überwältigend. Beschränken Sie sich zum Beispiel nur auf ein main-Element anstelle von drei oder 4.

Lighthouse empfiehlt, Ihre Website manuell daraufhin zu prüfen, ob „HTML5-Markierung zur Verbesserung der Navigation verwendet werden.“ Sie können diese Liste mit Sehenswürdigkeiten Elemente um Ihre Seite zu überprüfen.

Sich wiederholende Inhalte mit Sprunglinks umgehen

Auf vielen Websites werden die Überschriften wiederholt, was lästig sein kann. mit assistiven Technologien navigieren können. Verwenden Sie einen Link zum Überspringen, damit Nutzer diesen Inhalt umgehen können.

Ein Sprunglink ist ein nicht sichtbares Ankerelement, das immer das erste fokussierbare Element in das DOM. Normalerweise enthält sie einen In-Page-Link zum Hauptinhalt der Seite. Weil es als erstes Element im DOM ist, ist nur eine einzige Aktion erforderlich, von Hilfstechnologien bis hin zur Fokussierung auf und umständliche Navigation zu umgehen.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Viele beliebte Websites wie GitHub, New York Times und Wikipedia alle Sprunglinks enthalten. Versuchen Sie, diese aufzurufen und drücken Sie die TAB-Taste auf Ihrem mehrere Male mit der Tastatur.

Mit Lighthouse können Sie prüfen, ob Ihre Seite einen Link zum Überspringen enthält. Führen Sie den Prüfen Sie die Barrierefreiheit erneut und suchen Sie nach den Ergebnissen der Seite Die Seite enthält eine Überschrift, Link zum Überspringen oder zu Sehenswürdigkeiten überprüft werden.