Überschriften und Orientierungspunkte

Rob Dodson

Screenreader haben Befehle, mit denen Nutzer schnell zwischen Überschriften oder bestimmten Landmarken wechseln können. Eine Umfrage unter Screenreader-Nutzern hat gezeigt, dass sie sich auf einer unbekannten Seite am häufigsten anhand der Überschriften orientieren.

Wenn Sie die richtigen Überschriften und Markierungselemente verwenden, können Sie die Navigation auf Ihrer Website für Nutzer mit Hilfstechnologien erheblich verbessern.

Überschriften verwenden, um die Seite zu strukturieren

Verwenden Sie h1-h6-Elemente, um einen strukturellen Entwurf für Ihre Seite zu erstellen. Ziel ist es, ein Gerüst der Seite zu erstellen, damit sich alle, die sich anhand der Überschriften orientieren, ein Bild davon machen können.

Häufig wird ein einzelnes h1 für die Hauptüberschrift oder das Logo auf einer Seite, h2-Elemente für wichtige Abschnitte und h3-Elemente für unterstützende Unterabschnitte verwendet:

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

Überschriftenebenen nicht überspringen

Entwickler überspringen häufig die Ebenen der Überschriften, um die Standardstile des Browsers zu verwenden, die ihrem Design genau entsprechen. Dies gilt als Antimuster, da es das Modell der Gliederung bricht.

Verwenden Sie anstelle der Standardschriftgröße des Browsers für Überschriften Ihr eigenes CSS und überspringen Sie keine Ebenen.

Diese Website enthält beispielsweise den Abschnitt „IN DEN NACHRICHTEN“ mit zwei Überschriften:

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

Die Abschnittsüberschrift „IN DEN NACHRICHTEN“ könnte ein h2-Element sein und die unterstützenden Überschriften könnten beide h3-Elemente sein.

Da die font-size für „AKTUELL“ kleiner als die Überschrift ist, kann es verlockend sein, die Überschrift für die erste Meldung als h2 und „AKTUELL“ als h3 zu formatieren. Das entspricht zwar dem Standardstil des Browsers, würde aber den Umriss stören, der einem Screenreader-Nutzer angezeigt wird.

Mit Lighthouse können Sie prüfen, ob auf Ihrer Seite Überschriftenebenen übersprungen werden. Führen Sie die Prüfung der Barrierefreiheit durch (Lighthouse > Optionen > Barrierefreiheit) und sehen Sie sich die Ergebnisse der Prüfung Überschriften überspringen keine Ebenen an.

Orientierungspunkte für die Navigation verwenden

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

Verwenden Sie Landmark-Tags, um wichtige Bereiche Ihrer Seite zu definieren, anstatt sich auf divs zu verlassen. Achten Sie darauf, nicht zu viele Markierungen zu verwenden, da zu viele Markierungen überfordern können. Verwenden Sie beispielsweise nur ein main-Element anstelle von drei oder vier.

Lighthouse empfiehlt, Ihre Website manuell zu prüfen, um sicherzustellen, dass „HTML5-Markierungselemente zur Verbesserung der Navigation verwendet werden“. Anhand dieser Liste von Markierungselementen können Sie Ihre Seite prüfen.

Sich wiederholende Inhalte mit Überspring-Links überspringen

Viele Websites enthalten in ihren Headern wiederholte Navigationselemente, was die Navigation mit Hilfstechnologien erschweren kann. Verwenden Sie einen Link zum Überspringen, damit Nutzer diese Inhalte überspringen können.

Ein Sprunglink ist ein Anker außerhalb des Bildschirms, der immer das erste fokussierbare Element im DOM ist. In der Regel enthält es einen In-Page-Link zum Hauptinhalt der Seite. Da es sich um das erste Element im DOM handelt, ist nur eine einzige Aktion der Hilfstechnologie erforderlich, um den Fokus darauf zu legen und wiederholte 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, die New York Times und Wikipedia enthalten solche Links. Rufen Sie die Seite auf und drücken Sie mehrmals die Taste TAB auf Ihrer Tastatur.

Mit Lighthouse können Sie prüfen, ob Ihre Seite einen Link zum Überspringen enthält. Führen Sie die Prüfung der Barrierefreiheit noch einmal aus und sehen Sie sich die Ergebnisse der Prüfung Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich an.