Landmarks machen deine Seite überspringbar

Jemand öffnet deine Website mit einem Screenreader. Die Software liest nicht stur von oben nach unten vor, sondern wartet auf einen Befehl. Der Besucher drückt eine Taste, weil er die Begrüßungszeile und die zwanzig Menüpunkte heute schon auf vier anderen Seiten gehört hat und jetzt direkt zum eigentlichen Text will. Ob dieser Sprung funktioniert, entscheidet dein Markup.

Wir haben quer durch deutschsprachige Firmenseiten gemessen, wie oft er funktioniert. Bei 47,3 Prozent der 14.984 geprüften Seiten ist der Hauptinhalt nicht ausgezeichnet. Bei Jimdo-Seiten sind es 88 Prozent, bei Wix nur 4 Prozent. Der Unterschied liegt fast immer am Standard-Theme, nicht am Betreiber.

Die Spreizung zwischen 88 und 4 Prozent ist der interessante Teil dieser Zahl. Dahinter steckt keine unterschiedliche Sorgfalt der Leute, die die Seiten pflegen, sondern die Bauweise der jeweiligen Vorlage. Wer seine Seite in einem Baukasten zusammenklickt, bekommt das Markup nie zu sehen und kann an dieser Stelle auch nichts falsch machen. Beim Besucher kommt das Ergebnis trotzdem an. Die Reparatur besteht in den allermeisten Fällen aus einer Handvoll geänderter Tag-Namen.

Was ein Landmark ist

Ein Landmark ist ein Bereich deiner Seite, der dem Browser seine Funktion meldet. Der Browser gibt diese Information an die Hilfstechnologie weiter, und die baut daraus eine Liste. Für den Screenreader sieht deine Seite dann nicht aus wie eine Wand aus Text, sondern wie ein Hörbuch mit Kapitelmarken: Kopfbereich, Menü, Hauptinhalt, Seitenleiste, Fußbereich.

Das Springen selbst ist unspektakulär. In NVDA drückt man D und landet beim nächsten Bereich. VoiceOver auf dem Mac blendet über den Rotor eine Liste aller Bereiche ein, aus der man direkt auswählt. JAWS nutzt dafür R. Gibt es keinen einzigen ausgezeichneten Bereich, passiert bei diesen Tasten nichts, und der Besucher arbeitet sich Element für Element durch dein Menü. Sehende erledigen dieselbe Orientierung mit einem Blick in einer halben Sekunde.

Die sechs Bereiche, auf die es ankommt

<header> ist der Kopfbereich mit Logo und Claim. Die Rolle heißt intern banner.
<nav> ist eine Navigation, also jede Sammlung von Links, die zur Orientierung dient.
<main> ist der Hauptinhalt, das heißt alles, was diese Unterseite von allen anderen unterscheidet. Er kommt genau einmal pro Seite vor.
<aside> ist ergänzendes Beiwerk wie eine Seitenleiste mit Öffnungszeiten oder verwandten Beiträgen.
<footer> ist der Fußbereich mit Impressum, Kontakt und Copyright.
<search> umschließt die Suche. In älteren Vorlagen erledigt role="search" am Formular dasselbe.

Zwei Feinheiten gehören dazu. <header> und <footer> gelten nur dann als eigener Bereich, wenn sie direkt im Dokument liegen und nicht in einem <article> oder <section> stecken. Und wenn du mehrere Navigationen hast, etwa Hauptmenü, Brotkrumen und Fußzeilenmenü, gib jeder ein aria-label. Sonst hört der Besucher in seiner Liste drei Mal dasselbe Wort und muss raten. Eine einzelne Navigation und eine einzelne Seitenleiste brauchen dagegen kein Label, weil ihre Bezeichnung dann eindeutig ist.

Die drei Fälle, die uns am häufigsten begegnen

Kein Hauptinhalt ist der eine Fall, zwei Hauptinhalte der andere. Der zweite entsteht meistens ungewollt, wenn die Vorlage bereits ein <main> mitbringt und ein Seitenbaukasten oder ein Plugin ein weiteres einsetzt. In der Bereichsliste stehen dann zwei Einträge mit derselben Bezeichnung, und der Besucher probiert beide durch, bis einer der richtige ist.

Die dritte Variante ist ein <main>, das zu viel umschließt. Liegen Kopfbereich und Fußzeile mit darin, ist die Angabe formal vorhanden, hilft aber niemandem, weil der Sprung wieder oben beim Logo endet. Werkzeuge, die auf deiner Seite laufen, können eine vorhandene Struktur lesen und daraus zum Beispiel eine Sprungliste bauen. Erfinden können sie sie nicht, denn kein Programm erkennt zuverlässig, welcher von zwölf verschachtelten Containern der eigentliche Text ist.

Ein Seitenaufbau vorher und nachher

So sieht der Rumpf einer typischen Handwerkerseite aus, die aus einem Baukasten kommt:

<div class="site-header">
  <div class="logo">Fliesen Musterbach</div>
  <div class="menu">
    <a href="/">Start</a>
    <a href="/leistungen">Leistungen</a>
    <a href="/kontakt">Kontakt</a>
  </div>
</div>

<div class="content">
  <h1>Fliesen verlegen in Mainz-Kastel</h1>
  <p>Seit 1994 im Familienbetrieb.</p>
</div>

<div class="sidebar">
  <h2>Öffnungszeiten</h2>
</div>

<div class="footer">
  <p>Fliesen Musterbach GmbH</p>
</div>

Und so sieht derselbe Rumpf aus, nachdem die Bereiche benannt sind:

<header class="site-header">
  <div class="logo">Fliesen Musterbach</div>
  <nav class="menu" aria-label="Hauptmenü">
    <a href="/">Start</a>
    <a href="/leistungen">Leistungen</a>
    <a href="/kontakt">Kontakt</a>
  </nav>
</header>

<main class="content" id="inhalt" tabindex="-1">
  <h1>Fliesen verlegen in Mainz-Kastel</h1>
  <p>Seit 1994 im Familienbetrieb.</p>
</main>

<aside class="sidebar">
  <h2>Öffnungszeiten</h2>
</aside>

<footer class="footer">
  <p>Fliesen Musterbach GmbH</p>
</footer>

Geändert haben sich fünf Tag-Namen und drei Attribute. Alle Klassen bleiben stehen, dein Stylesheet greift unverändert weiter, und optisch ist der Unterschied null. Für den Besucher mit Screenreader ist es der Unterschied zwischen einer Seite ohne Kapitel und einer mit.

Wenn du an die Vorlage nicht herankommst

Manche Baukästen lassen dich die Container nicht umbenennen. Dann setzt du die Rolle als Attribut auf das vorhandene <div>:

<div class="content" role="main" id="inhalt" tabindex="-1">

Für die Hilfstechnologie ist das gleichwertig. Sobald du an das Element selbst herankommst, ist das echte Tag die haltbarere Variante, weil es auch ohne zusätzliches Attribut überlebt, wenn jemand später am Template arbeitet.

Der Test, der zwei Minuten dauert

Öffne deine Startseite in Chrome, Firefox oder Edge.
Klicke mit der rechten Maustaste irgendwo auf einen Textabsatz und wähle "Untersuchen".
Klicke einmal in den Bereich mit dem HTML-Code, damit er den Fokus hat, und drücke dann Strg+F (auf dem Mac Cmd+F). Das ist die Suche innerhalb des Codes, nicht die normale Seitensuche.
Tippe <main ein und sieh dir den Trefferzähler neben dem Suchfeld an.
Null Treffer heißt, dein Hauptinhalt ist nicht ausgezeichnet. Ein Treffer ist richtig. Zwei oder mehr Treffer bedeuten, dass zwei Bereiche um dieselbe Rolle konkurrieren.
Wiederhole Schritt vier mit <nav, <header und <footer. Findest du bei <main nichts, such zusätzlich nach role="main".

Prüfe zwei Seiten, die Startseite und eine typische Unterseite. Viele Vorlagen benutzen dafür verschiedene Templates, und in der Praxis ist oft genau eines davon in Ordnung und das andere nicht. Bei einem Shop nimm noch eine Produktseite dazu, die stammt meistens aus einem dritten Template.

Der Sprunglink, der jetzt erst funktioniert

Sobald <main> steht, lohnt sich der Link ganz oben im Dokument, den Tastaturnutzer als erstes Element erreichen. Er zeigt auf die Kennung deines Hauptinhalts:

<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>

Das tabindex="-1" aus dem Beispiel oben sorgt dafür, dass der Tastaturfokus dort auch ankommt und nicht nur die Bildlaufposition wandert. Von diesem Link profitieren auch Leute, die gar keinen Screenreader benutzen, sondern nur mit der Tastatur navigieren, weil die Maus für sie nicht in Frage kommt. Für sie sind die zwanzig Menüpunkte auf jeder Unterseite zwanzig Tastendrücke, und die spart der Link ihnen ab sofort.