Practical Semantics: site-wide navigation

Ziel

Ziel dieses Kapitels ist, zu zeigen, wie semantische Information von HTML-Elementen durch den accTree zu Screen Readern kommt, und wie diese Information einem Screen Reader User hilft, den Seiteninhalt zu verstehen und durch ihn zu navigieren wie ein sehender User. Navigationselemente helfen dem User zu verstehen, wo er sich befindet und wohin er gehen kann.

• Wähle das richtige HTML-Element, damit AT die Semantik "anzeigen" können: das <nav>-Element
• Das <nav>-Element hat die implizite Rolle »Navigation« und ist zugleich eine Navigation Landmark. Diese hilft dem User nicht nur zu erkennen, was es ist, sondern auch sich effizient zwischen der Navigation und anderen Key Landmarks auf der Seite zu bewegen.
• Eine Navigation enthält per Definition Links zu anderen Seiten innerhalb der Website oder zu bestimmten Abschnitten auf derselben Seite – je nachdem, welche Art von Navigation erstellt wird.

<nav aria-label="Site">
  <ul role="list">
    <li><a href="products" aria-current="page">Products</a></li>
    <li><a href="team">Team</a></li>
    <li><a href="press">Press</a></li>
  </ul>
</nav>

Mit dieser semantischen Struktur hat der User mehrere Möglichkeiten bekommen:

• zur Navigation über Landmarks navigieren
• zu den Links über die Navigation navigieren
• zur Navigationsliste über list keyboard shortcuts navigieren

• Die Anzahl der Navigationspunkte ist für einen sehenden Besucher sofort ersichtlich. Um dieses Erlebnis auch für einen Screenreader-User nachvollziehbar zu machen, müssen wir die Links in einer Liste verpacken. Listen stellen die Anzahl der Listenpunkte (also der Navigationspunkte) zur Verfügung, genauso wie die Reihenfolge. Für eine normale Navigation reicht eine <ul>-Liste, für eine Breadcrumb-Navigation spielt die Reihenfolge der Listenpunkte aber eine Rolle, daher sollte dafür eine <ol> gewählt werden. Beide mappen auf die Rolle "Liste".
• Sehende User können zwischen Haupt- und Breadcrumb-Navigation unterscheiden. Für Screenreader müssen entsprechende Informationen hinterlegt werden. Man kann die Navigationen mit einer eindeutigen Kennzeichnung auszeichnen:
• aria-label="Site" bzw. aria-label="Breadcrumb"identifiziert die Absicht der Navigation
• visual-hidden label und aria-labelledby="Site"
• Nicht den Begriff »Navigation« verwenden – wird sonst doppelt vorgelesen!

<nav class="breadcrumb" aria-label="Breadcrumbs">
  <ol class="breadcrumb-list" role="list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#" aria-current="page">Sustainable Kitchen</a></li>
  </ol>
</nav>

Styling mit CSS

CSS kann einen Einfluss darauf haben, wie Semantics von Screenreadern dargestellt bzw. vorgelesen werden. Wenn z.B. die list-styles entfernt werden, dann wirft Safari auch die semantische Bedeutung aus dem Fenster. In den neueren Versionen passiert das nicht, sofern die Liste in einem <nav>-Element enthalten ist. Für ältere Safari-Versionen kann dem <ul> bzw. dem <ol>-Element ein role="list" mitgegeben werden.

Aktuelle Seite kennzeichnen

Information »wo bin ich« ist wichtig: dafür gibt es allerdings kein natives HTML-Attribut. Dafür benötigen wir ARIA Attribute. ARIA-Attribute stellen Informationen zu Status und Semantik zur Verfügung, wenn keine HTML Semantik verfügbar ist. Für den aktuellen Link kann aria-current="true" oder aria-current="page" verwendet werden, wobei »page« besser ist, weil Screenreader dann »current page« statt »link, current« vorlesen.

nav a[aria-current="page"] kann dann gleich als Styling-Hook in CSS verwendet werden.

Semantics should provide three main pieces of information:

• die Rolle eines Elements (was es ist)
• den Namen eines Elements (was es tut, was sein Verwendungszweck ist)
• den Status eines Elements (sofern anwendbar)

... das sagt dem Benutzer, womit er gerade interagiert und was er als nächstes tun kann.