Komponentenmuster

Häufig verwendete UI-Muster und ihre barrierefreie Implementierung, basierend auf den WAI-ARIA Authoring Practices Guide (APG).

Dialog (Modal) Muss

• role="dialog" und aria-modal="true"
• aria-labelledby auf den Dialog-Titel
• Fokus beim Öffnen in den Dialog setzen
• Fokus-Trap innerhalb des Dialogs
• Escape schliesst den Dialog
• Fokus kehrt zum Auslöser zurück

Tabs Muss

<div role="tablist" aria-label="Kursdetails">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Beschreibung</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Termine</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>...</div>

Accordion Muss

Bevorzugt das native <details>/<summary>-Element verwenden:

<details>
  <summary>Kursgebühren</summary>
  <p>Die Kursgebühr beträgt...</p>
</details>

Dropdown / Disclosure

<button aria-expanded="false" aria-controls="dropdown-menu">
  Optionen
</button>
<ul id="dropdown-menu" role="menu" hidden>
  <li role="menuitem">Bearbeiten</li>
  <li role="menuitem">Löschen</li>
</ul>

Tooltip

<button aria-describedby="tooltip-1">ℹ</button>
<div role="tooltip" id="tooltip-1">Weitere Informationen zum Kurs</div>

Web-Components-Toolbox

Die Migros-Gruppe verwendet eine gemeinsame Web-Components-Bibliothek. Barrierefreiheit muss direkt in den Basiskomponenten umgesetzt werden, damit alle Websites automatisch profitieren.

• web-components-toolbox – Basis-Bibliothek
• web-components-toolbox-klubschule – Klubschule-Erweiterungen
• web-components-toolbox-migros-design-experience – MDX-Integration

Für jede Komponente der Toolbox gelten die Anforderungen aus diesem Dokument. Neue Komponenten müssen vor dem Merge einen A11y-Review durchlaufen (siehe Governance → Prozess).