Die barrierefreie Website-Navigation

Vor kurzem erschien das Buch Inclusive Design Patterns von Heydon Pickering, das Best Practices für zugängliche Websites vorschlägt – auch für eine barrierefreie Navigation. Eine Pflichtlektüre, die ich jedem Frontend Developer wärmstens empfehle.

Anforderungen an eine zugängliche Navigation

  • semantisches HTML-Markup
  • für Screenreader verwendbar
  • steuerbar über die Tastatur
  • intuitiv zu bedienen

TL;DR: Der ganze HTML-Code

<nav>
    <ul>
        <li>
            <a href="#main">
                <img src="assets/images/logo.svg" alt="Startseite">
            </a>
        </li>
        <li><a href="/ueber-uns">Über uns</a></li>
        <li><a href="/produkte">Produkte</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
        <li><a href="/impressum">Impressum</a></li>
    </ul>
</nav>

...

<main id="main">
    [Hauptinhalt der Website]
</main>

Code-Erläuterungen

Das Navigationselement

<nav></nav>

Mit dem HTML5 nav Element zeichnen wir den Bereich unserer Website aus, dessen Links auf andere Seiten oder andere Bereiche innerhalb der selben Seite verweisen. Wichtig ist, dass laut W3C-Spezifikation nicht alle Links einer Website mit dem nav Element umschlossen werden. Das nav Element beinhaltet die Hauptmenü-Punkte der Website.

Das nav Element besitzt die gleichen Eigenschaften wie die WAI-ARIA landmark role="navigation". Wir brauchen dem nav Element diese Rolle also nicht zuweisen.

Screenreader wie NVDA oder JAWS ermöglichen es dem Website-Besucher durch einen Tastenbefehl direkt durch die Landmark roles unserer Website zu navigieren.

Die unsortierte Liste

<nav>
    <ul>
        <li><a href="/startseite">Startseite</a></li>
        <li><a href="/ueber-uns">Über uns</a></li>
        <li><a href="/produkte">Produkte</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
        <li><a href="/impressum">Impressum</a></li>
    </ul>
</nav>

Die Verwendung eines Listen-Elementes hat drei Vorteile für unsere Navigation:

  1. Die Links in der Navigation können als Aufzählung der Seiten unserer Website verstanden werden. Wenn wir diese in einer unsortierten Liste gruppieren, zeichnen wir sie damit auch als solche Auflistung semantisch aus.
  2. Sollte das CSS der Website nicht laden (z. B. plötzlich keinen Empfang in der Bahn), werden die ungestalteten Menüpunkte zumindest leserlich in Form einer unsortierten Liste dargestellt und können vom Website-Besucher schneller erfasst und als solche verstanden werden.
  3. Screenreader versorgen den Website-Besucher mit zusätzlichen Informationen und ggf. Navigationsmöglichkeiten, wenn wir unsere Links in einer Liste darstellen.

Der aktuelle Link als Anker zum Hauptinhalt.

Befinden wir uns z. B. auf der Startseite, verweist der Anker „Startseite“ auf sich selbst. Bei einem Klick auf diesen Link wird die gleiche Seite neu geladen. Für den Website-Besucher ergeben sich daraus zwei Nachteile:

  • Durch das Neuladen der gleichen Seite verlieren sie die aktuelle Tab-Position, welcher wieder am Dokumenten-Anfang startet.
  • Screenreader lesen die Website noch mal von Beginn an vor.

Dieses Link-Verhalten kann beispielsweise dann verwirrend sein, wenn man über eine Suchmaschine auf unserer Website landet und nicht weiß, dass man sich bereits auf der gewünschten Seite befindet. Um das zu vermeiden, empfiehlt es sich deshalb den Anker in der Navigation, auf dessen Seite sich der Website-Besucher zur Zeit befindet, auf den Hauptinhalt der gleichen Seite verweisen zu lassen:

<nav>
    <ul>
        <li><a href="#main">Startseite</a></li>
        <li><a href="/ueber-uns">Über uns</a></li>
        <li><a href="/produkte">Produkte</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
        <li><a href="/impressum">Impressum</a></li>
    </ul>
</nav>

...

<main id="main">
    [Hauptinhalt der Website]
</main>

Das Logo als Link zur Startseite

Es ist inzwischen gängige Praxis, sein Logo als Link zur Startseite auszuzeichnen. Ein bekanntes Beispiel hierfür ist www.amazon.de. Oft befinden sich Logo und Navigation gemeinsam im Website-Header:

<header role="banner">
    <a href="/startseite">
        <img src="assets/images/logo.svg" alt="Startseite">
    </a>
    <nav>
        <ul>
            <li><a href="#main">Startseite</a></li>
            <li><a href="/ueber-uns">Über uns</a></li>
            <li><a href="/produkte">Produkte</a></li>
            <li><a href="/kontakt">Kontakt</a></li>
            <li><a href="/impressum">Impressum</a></li>
        </ul>
    </nav>
</header>

...

<main id="main">
    [Hauptinhalt der Website]
</main>

Kleiner Usability-Hinweis am Rande: Ist ein Bild verlinkt, sollte der alternativ-Text im alt Attribut das Ziel des Links beschreiben und nicht den Inhalt des Bildes. Daher wählen wir „Startseite“ als alternativ-Text für unsere Logo-Grafik im vorangegangenen Code-Beispiel.

Der Nachteil des oben gezeigten HTML-Codes: Wir haben im Header das Logo, das auf die Startseite verweist und direkt darunter als ersten Listenpunkt den Anker, der zu unserem Hauptinhalt springt. Diese zwei verschiedenen Verhaltensweisen der Links mindern die Usability.

Daher empfiehlt Heydon Pickering das Logo als Grafik direkt als ersten Listenpunkt darzustellen und auf den Hauptinhalt verweisen zu lassen, wenn man sich auf der Startseite befindet, so wie im nachfolgenden Code-Beispiel zu sehen.

Der finale HTML-Code:

<nav>
    <ul>
        <li>
            <a href="#main">
                <img src="assets/images/logo.svg" alt="Startseite">
            </a>
        </li>
        <li><a href="/ueber-uns">Über uns</a></li>
        <li><a href="/produkte">Produkte</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
        <li><a href="/impressum">Impressum</a></li>
    </ul>
</nav>

...

<main id="main">
    [Hauptinhalt der Website]
</main>

Philip Isik

Philip kennt alle HTML-/CSS-Spezifikationen und rezitiert daraus fließend. Aus den Kundenwünschen leitet er Lösungen mit Weitblick ab.