Hier findest Du Checklisten, Beispiel-Quellcode sowie eine Zusammenstellung aller wichtiger WCAG-Erfolgskriterien, die Dir bei der Entwicklung eines barrierefreien Menüs helfen können. Eine detailliertere Beschreibung findest Du auf in meiner Notiz zum Thema "barrierefreie Menüs".
WCAG-Erfolgskriterien
Bemerkung: Diese Liste wurde u. a. mit Hilfe der Webseite This is WCAG zusammengestellt. Sie ist nicht zwingend vollständig. Derjenige, der eine essentielle Richtlinie vermisst, kann sich sehr gern bei mir melden.
- WCAG 1.4.3 - Contrast (Minimum) (Level AA)
- WCAG 1.4.4 - Resize Text (Level AA)
- WCAG 1.4.6 - Contrast (Enhanced) Level AAA)
- WCAG 1.4.11 - Non-text Contrast
- WCAG 1.4.13 - Content on Hover or Focus (Level AA)
- WCAG 2.1.1 - Keyboard (Level A)
- WCAG 2.1.2 - No Keyboard Trap (Level A)
- WCAG 2.4.4 - Link Purpose (In Context) (Level A)
- WCAG 2.4.7 - Focus Visible (Level AA)
- WCAG 2.4.11 - Focus Not Obscured (Minimum) (Level AA)
- WCAG 2.4.12 - Focus Not Obscured (Enhanced) (Level AAA)
- WCAG 2.4.13 - Focus Appearance (Level AAA)
- WCAG 2.5.5 - Target Size (Level AAA)
- WCAG 2.5.8 - Target Size (Minimum)(Level AA)
- WCAG 3.2.3 - Consistent Navigation (Level AA)
- WCAG 4.1.2 - Name, Role, Value (Level A)
Beispiel-Quellcode
<nav aria-labelledby="menu-header">
<h2 id="menu-header" class="visually-hidden">Seitenmenü</h2>
<ul>
<li><a href="#">erster Menüpunkt</a></li>
<li>
<button aria-controls="submenu-projects" aria-expanded="false" aria-label="Untermenü Projekte - enthält aktuelle Seite">Projekte</button>
<ul id="submenu-projects">
<li><a href="#">Projekt 1</a></li>
<li><a href="#" aria-current="page">Projekt 2</a></li>
<li><a href="#">Projekt 3</a></li>
</ul>
</li>
<li><a href="#">dritter Menüpunkt</a></li>
</ul>
</nav>Checklisten
HTML-Aufbau
Untermenüs
Screenreader-Unterstützung
Gestaltung
Farbwahl
Schaltflächen
Tastatursteuerung (Disclosure-Pattern)
Diese Seite wurde am 18.02.2024 erstellt und zuletzt am 30.07.2024 aktualisiert.