Barrierefreie Navigationsmenüs mit der Popover API erstellen
Navigationsmenüs sind ein wesentlicher Bestandteil jeder Website. Sie sind meistens in der Kopfzeile platziert und bieten einen Überblick über die Seitenhierarchie einer Website. Nutzer:innen können sich einen Überblick über den Inhalt verschaffen und schnell zu den wichtigsten Abschnitten der Website navigieren.
Viele Websites verwenden Fly-Out-Menüs (oder Drop-Down-Menüs), bei denen bestimmte Menüpunkte ein Untermenü öffnen, wenn man sie anklickt oder den Mauszeiger über sie bewegt. Oft sind diese Menüs für Screenreader- und Tastatur-Nutzer:innen nur sehr schlecht zugänglich. Aber wir können es besser machen!
Ich zeige euch, wie ihr auf einfache Weise ein barrierefreies Fly-Out-Menü bauen könnt. Dazu nutzen wir die Fähigkeiten moderner Web-Features wie der Popover API.
Foto: © Valentin Antonucci / pexels.com
Was wir erreichen wollen
Unser Navigationsmenü sollte für verschiedene Nutzergruppen einfach zu bedienen sein:
- Die Untermenüs sollten über dem Inhalt der Website erscheinen und nicht sofort verschwinden, wenn die Maus den anklickbaren Bereich verlässt.
- Nutzer:innen von Bildschirmlesegeräten benötigen aussagekräftiges Markup, um das Navigationsmenü zu verstehen und zu bedienen.
- Tastaturnutzer:innen sollen das Menü allein mit der Tastatur bedienen können.
Demo: Barrierefreies Navigationsmenü
Ich habe eine CodePen-Demo eines barrierefreien Navigationsmenüs mit der Popover-API erstellt. Öffnet die Demo auf einem Desktop-Bildschirm oder einem Tablet im Querformat, um das Fly-Out-Menü zu sehen. Auf kleineren Geräten wird die Demo stattdessen ein mobiles Menü anzeigen.
Foto: © Alexander Lehner
Das Navigationsmenü ist für Maus-, Tastatur- und Screenreader-Nutzer:innen leicht zu bedienen. Schauen wir uns die wichtigsten Elemente an.
Aussagekräftiges Markup
Wir verwenden das nav
-Element, um die Rolle des Menüs zu vermitteln. Die Menüpunkte
befinden sich in einer ungeordneten Liste (ul
-Element). So können assistive Technologien die
Anzahl der Menüpunkte vorlesen und entsprechende Navigationsfunktionen bereitstellen.
<nav class="main-nav">
<ul>
<li>
<button popovertarget="nav-panel-solutions" type="button">Solutions</button>
<div id="nav-panel-solutions" popover>...</div>
</li>
<li><a href="#">Products</a></li>
<li>...</li>
<li>...</li>
</ul>
</nav>
Die Listenelemente enthalten entweder einen direkten Link zu einer Unterseite, oder sie enthalten
ein button
-Element, das ein Untermenü mit popover
-Attribut öffnet.
Die Schaltfläche ist mit dem Popover-Inhalt über das Attribut popovertarget
verknüpft.
Einer der großen Vorteile der Popover-API: Sie teilt den assistiven Technologien automatisch mit, ob das Untermenü gerade ein- oder ausgeklappt ist. Weitere Informationen findet ihr im Artikel „On popover accessibility: what the browser does and doesn’t do“.
Vermeidet die menu
-Rolle
In meiner Demo verwende ich die Rollen menu
und menuitem
nicht
für das Navigationsmenü. Das ist Absicht! Diese ARIA-Rollen sind nur für Menü-Widgets gedacht, die sich wie native
Betriebssystem-Menüs verhalten.
Lest den Artikel „Don’t Use ARIA Menu Roles for Site Nav“ von Adrian Roselli für eine detaillierte Erklärung.
Visuelle Platzierung
Wenn ein Untermenü geöffnet wird, erscheint es automatisch im Top-Layer, einer separaten Ebene, die über allen anderen im Webdokument angezeigten Ebenen liegt. Ihr müsst euch nur um die Platzierung und Größe des Untermenüs kümmern:
header nav.main-nav [popover] {
top: var(--header-height);
margin: 0;
width: 100%;
}
Popover-Inhalte erscheinen standardmäßig in der Mitte des Bildschirms. Um unsere Untermenüs direkt unterhalb
der Kopfzeile zu platzieren, setzen wir für top
die Höhe der Kopfzeile und entfernen
jeglichen margin
. Anschließend setzen wir width
auf 100%
,
damit das Untermenü die gesamte Breite der Seite einnimmt.
Tastaturbedienbarkeit
Mit der TAB
-Taste könnt ihr die Links und Schaltflächen im Navigationsmenü fokussieren. Nach dem
Öffnen eines Untermenüs ist dessen Inhalt der nächste in der Fokusreihenfolge. Durch Drücken der ESC
-Taste
wird das Untermenü geschlossen und der Fokus automatisch wieder auf die Trigger-Schaltfläche gesetzt. Alles dank der mächtigen
Popover-API! 🤩
Light-Dismiss der Untermenüs
Ein weiteres integriertes Feature der Popover-API ist Light-Dismiss: Wenn ihr einen Bereich außerhalb des Untermenüs
anklickt, wird das Untermenü geschlossen und der Fokus auf das Trigger-Element zurückgesetzt. Ihr müsst euch nicht mehr
mit focusout
-Events in JavaScript herumschlagen.
Nützliche Links
- Navigation Menus Tutorial (W3C)
- Disclosure Pattern (ARIA APG)
- Example Disclosure Navigation Menu (ARIA APG)
- Popover API (MDN)
Erstellt am