JavaScript/Tutorials/zugängliche Dropdown-Navigation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter Dropdown-Menus versteht man Menüs, die sich durch Userinteraktion z.B. bei :hover erweitern. Obwohl sie lange der Standard für die Hauptnavigation einer Webseite waren, sind sie nicht für eine Steuerung durch Touch oder Tastatur geeignet.

In diesem Tutorial zeigen wir Ihnen, wie Sie Dropdown-Menüs erstellen, die auch mit Touch oder der Tastatur bedient werden können.

Vorüberlegungen[Bearbeiten]

Klassische Dropdown-Menüs ermöglichen es, umfangreiche Linklisten platzsparend und übersichtlich zu präsentieren. Die Struktur wird über die Hauptmenüpunkte auf einen Blick erfasst. Ein :hover öffnet ein Submenü mit weiteren Links, ein Klick auf den Hauptmenüpunkt die dazugehörende Seite.

Beispiel: CSS-basiertes Dropdown-Menü ansehen …
<nav>
  <ul>
    <li><a href="#">Seite 1</a></li>

    <li><a href="#">Seite 2</a>
      <ul>
        <li><a href="#">Seite 2a</a></li>
        <li><a href="#">Seite 2b</a></li>
      </ul>
    </li>

    <li aria-current="page"><a href="#">aktuelle Seite</a></li>
    ...

</nav>
Das Beispiel besteht aus verschachtelten Listen mit Links. Die Listenelemente der ersten Liste bilden die Hauptmenüpunkte. Bei :hover mit der Maus oder dem :focus durch ein Ansteuern mit der Tab-Taste öffenen sich die entsprechenden Sub-Menüs.

Da es auf mobilen Geräten kein :hover gibt, wird dies durch einen Tap auf den Bildschirm simuliert. Hier entsteht ein Problem:

Hauptmenüpunkte haben in einem Dropdown-Menü zwei Funktionen: Ein Tap öffnet das Submenü, aber gleichzeitig auch den dazugehörenden Link. Einige Mobilgeräte ermöglichen es zu tricksen: Wenn Benutzer den Finger auf dem Link lassen, wird ein Auswahlmenü eingeblendet. Mit "zurück" (häufig ↪) kann das Auswahlmenü geschlossen werden. Dann sind alle Links frei zugänglich. Dies ist den meisten Benutzer aber nicht bewusst.

Diese Funktionalität wollen wir so nachbauen, dass das Menü benutzerfreundlich bedienbar ist.

Nachbau[Bearbeiten]

Ziel ist ein Submenü, das mit :focus angesteuert werden und dann mit einem Klick geöffnet werden kann. Um dies zu erreichen und dabei nicht den bestehenden Link zu deaktivieren, muss die oben beschriebene Funktionalität aufgeteilt werden:

  • Der Link auf die dem Hauptmenüpunkt entsprechende Seite bleibt unberührt.
  • Ein Button, der den Fokus erhält, öffnet mit einem Klick das betreffende Submenü.
  • Das Submenü wird mit CSS aus- und wieder eingeblendet.

ARIA-Roles[Bearbeiten]

Beispiel: Submenü mit ARIA-Attributen ansehen …
<nav> <ul> <li><a href="#">Seite 1</a></li> <li> <a href="#">Seite 2</a> <button aria-haspopup="true">Submenü öffnen</button> <ul aria-label="submenu" aria-expanded="false"> <li><a href="#">Seite 2a</a></li> <li><a href="#">Seite 2b</a></li> </ul> </li> <li aria-current="page"><a href="#">aktuelle Seite</a></li> ... </nav>
Schon im CSS-Tutorial wurde das Link-Element für den aktuellen Menüpunkt durch ein aria-current-Attribut gekennzeichnet.

Diese ARIA-Attribute verwenden wir auch für den Button, der mit aria-haspopup signalisiert, dass er ein Sublevel-Menü steuert.

Das Sublevel-Menü erhält ein aria-label submenu und ein aria-expanded-Attribut mit dem Wert false, das den Öffnungs-Zustand des Submenüs beschreibt.

ToDo (weitere ToDos)

Artikel muss fertiggestellt werden. ---Matthias Scharwies (Diskussion) 10:13, 1. Nov. 2017 (CET)

Weblinks[Bearbeiten]

keine ARIAs:

Tabbed[Bearbeiten]

Vorläufer-Artikel bei Selfhtml =[Bearbeiten]