Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2️⃣ 4.1.2 - Name, Rolle, Wert

A 2.0 Umsetzung

Ziel

Gewährleistung, dass unterstützende Technologien Benutzeroberflächenkomponenten korrekt interpretieren und verwenden können.

Beschreibung

  • Name: Der Bezeichner der Komponente muss programmtechnisch bestimmbar sein.
  • Rolle: Die Funktion oder der Typ (z. B. Überschrift, Link, Formularfeld) muss festgelegt sein.
  • Wert: Der aktuelle Status oder Wert einer Komponente muss wahrnehmbar und veränderbar sein.
  • Benachrichtigungen über Änderungen an Zuständen oder Werten müssen für assistierende Technologien verfügbar sein.

Anforderungen

  • Visuell konsistente Anzeige von Zuständen wie aktiviert/deaktiviert oder erweitert/eingeklappt.

Code-Beispiele

Standard-HTML-Komponente:

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email" />

Verwendung von WAI-ARIA für benutzerdefinierte Komponenten:

<div role="button" aria-expanded="false" id="toggle-menu" tabindex="0">
  Menü
</div>
<script>
  const button = document.getElementById('toggle-menu');
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
  });
</script>

Beispiel für dynamische Benachrichtigungen:

<div role="status" aria-live="polite">
  Status: In Bearbeitung...
</div>
<script>
  const statusDiv = document.querySelector('[role="status"]');
  setTimeout(() => {
    statusDiv.textContent = 'Status: Abgeschlossen!';
  }, 3000);
</script>