Enhancing the drop-down navigation

Die Navigation mit einem Navigation Toggle verstecken und anzeigen

Der Navigationsbutton ist ein disclosure widget und versteckt die gesamte Navigation: Wenn das Navigationselement versteckt ist, ist auch die Landmark weg.

Verstecke die Navigationsliste, nicht die Landmark!

Der Navigationsbutton soll innerhalb der Navigation Landmark platziert werden. Wenn der User die Landmark betritt, findet er ein disclosuere widget, das ihm sagt, dass der Inhalt da ist und dass dieser angezeigt werden kann, wenn der User das will.

<nav aria-labelledby="nav-label" class="site-nav" id="site-nav">
  <span hidden id="nav-label">Site</span>
  <ul role="list" id="nav-content" class="nav-content">
    <li data-has-children>
      <span>Products</span>

/* Select and hide the nav content container, not the <nav> element itself */
.site-nav .nav-toggle[aria-expanded="false"] + .nav-content {
  display: none;
}

2 Takeaways

Wenn die Navigation versteckt werden soll, verstecke nicht das <nav>-Element. Verstecke stattdessen den Inhalt der Navigation. Das stellt sicher, dass die Navigation Landmark Region verfügbar und über die Landmark Navigation erreichbar bleibt.
Platziere den Navigationsbutton innerhalb der Navigation Landmark Region. Das stellt sicher, dass der Inhalt der Navigation von Screen Reader Usern entdeckt werden kann.

Die Navigation zu einer Slide-Out Navigation aufrüsten

Auf Mobilgeräten versteckte Navigationen sind oft off-screen positioniert, außerhalb der Viewport-Grenzen. Wenn der Navigationsbutton aktiviert wird, fährt die Navigation wie eine Schublade heraus (Pattern: »navigation drawer«).Die Navigation slidet von der linken (oder auch rechten) Seite heraus und erstreckt sich über die gesamte Höhe des Bildschirms. Alles dahinter ist sichtbar, aber durch einen Scrim (Weichzeichner, Gewebe) verdunkelt. Scrim: durchscheinender Hintergrund hinter der Navigation. Die Navigation überlagert die Seiteninhalte, ähnlich wie ein Modal-Dialog.

Eine Hiding technique für die Navigationsschublade wählen

Wenn der Inhalt der Navgiation versteckt wird, muss er für alle User versteckt werden. Es reicht nicht, die Navigation off-screen zu positionieren, damit wäre sie nur für sehende User versteckt, aber nicht für Keyboard- und Screenreader-User. Das ist mit display: none;, visibility: hidden;, mit dem hidden- oder dem inert-Attribut erreichbar.

Best practice: inert-Attribut plus CSS Positioning Eigenschaften

Wenn die Navigation angezeigt wird, muss der restliche Seiteninhalt inert werden

Screen reader User können die Seite auf verschiedene Arten navigieren, das beinhaltet Keyboard-Shortcuts und einen virtuellen Cursor. Es ist daher absolut kritisch, den Inhalt so zu verstecken, dass diese nicht einen Link oder eine Überschrift im falschen Kontext aufrufen können. Darüber hinaus müssen Keyboard-User immer sehen können, wo der Fokus gerade ist. Wenn der Fokus aus der Navigation heraus- und in ein verdecktes Element auf der Seite hineingeht, verlieren sie die Spur bzw. ihre momentane Position auf der Seite, was SC 2.4.11 Focus not obscured verletzt. Das kann verhindert werden, indem die Navigation geschlossen wird, sobald sich der Keyboard-Fokus aus dem Element herausbewegt.
Alle Landmarks müssen also mit inert unerreichbar gemacht werden. Wenn die Landmarks inert gemacht werden, wird der Inhalt innerhalb der Landmarks inert.

Stelle eine Möglichkeit zur Verfügung, die ausgeklappte Navigation wieder auszublenden

Wenn alle Seiteninhalte inert sind, ist auch der Navigationsbutton inert. Daher brauchen wir einen separaten Close-Button innerhalb des Navigation Drawers, um die Navigation zu schließen. Dieser Button sollte vor dem Navigation Content stehen.
Zusätzlich soll die Navigation auch mit dem Drücken der Esc-Taste verschwinden.
Zugleich sollte der Keyboard-Fokus zum Navigationsbutton zurückkehren.

Keyboard-Fokus auf den Close-Button legen, wenn die Navigation angezeigt wird

Adrian Roselli ...

Gib dem Navigation Content Container eine bedeutungsvolle Rolle und einen Namen

Ein Screenreader-User braucht mehr Kontext für den Close-Button, da er sonst nicht weiß, was er da schließen kann. Der Navigation Content Container braucht also einen accName (bzw. zuerst eine Rolle, damit der generische <div>-Container überhaupt einen Namen bekommen kann), dann wird der Kontext des Close-Buttons mit vorgelesen. Möglich wäre role="group" oder role="dialog" – das hängt vom Keyboard-Fokus bei geöffneter Navigation ab. Den accName kann man vom Toggle-Button ableiten.

Keyboard-Fokus innerhalb der geöffneten Navigation

Wenn die Navigation sich öffnet, geht der Fokus zum Close-Button und dann können alle fokussierbaren Elemente nacheinander durchgetabbt werden. Wenn das letzte Element erreicht wurde, würde der Fokus als nächstes zum Browser hinausgehen, weil ja der Rest der Seite inert ist. Das ist aber nicht erwünscht. Zwei Dinge kann man tun, um dieses Verhalten zu verhindern:

Den Keyboard-Fokus innerhalb der Navigationslade fangen, solange sie angezeigt wird
oder die Navigatoin schließen, wenn sich der Fokus aus der Navigation herausbewegt.

Fokus-Falle (Focus-Trap) innerhalb der Navigation

Modal Dialoge haben meistens eine Fokusfalle, wenn sie geöffnet sind. Das heißt, wenn das letzte fokussierbare Element erreicht ist, geht der Fokus zum ersten fokussierbaren Element zurück. Im Navigation drawer kann man eine solche Falle einbauen oder auch nicht – diese Entscheidung sollte auf Basis von User testing gefällt werden.

Mache eine Liste mit allen fokussierbaren Elementen innerhalb der Navigation
Speichere das erste und das letzte fokussierbare Element in zwei Variablen
Setze einen Event Listener auf den Tab-Key:

Wenn der Fokus auf dem letzten fokussierbaren Element liegt, verhindere das Default Verhalten und bewege den Fokus zum ersten fokussierbaren Element
Wenn der Fokus auf dem ersten fokussierbaren Element liegt und der User shift drückt (um rückwärts zu tabben), verhindere das Default Verhalten und bewege den Fokus zum letzten fokussierbaren Element.

Wenn eine Fokusfalle verwendet wird, muss dem Screenreader mitgeteilt werden, dass die Navigation ein Modal ist, damit er versteht, dass der Fokus darin gefangen wird: role="dialog".

Navigation schließen, wenn der Fokus die Navigation verlässt

Wenn das letzte fokussierbare Element erreicht ist und die Tab-Taste erneut gedrückt wird, muss das default Verhalten verhindert und die Navigation geschlossen werden. Sobald die Navigation eingeklappt ist, müssen die Seiteninhalte wieder aktiv werden und der Keyboard Fokus zurück zum Navigationsbutton gehen. In diesem Fall muss die Navigation die role="group" bekommen.
Wenn die Navigation ausgeklappt ist und der Fokus auf dem Close-Button liegt, wir der Screenreader etwas wie "Close Navigation Group" vorlesen.

Relevante Success Criteria

SC 2.1.1 Keyboard (Level A) – Regel 3: xxx