Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2.1.2 - Keine Tastaturfallen

A 2.0 Umsetzung

Ziel

Verhindern, dass Benutzer beim Navigieren mit der Tastatur in einer Komponente „gefangen“ werden und nicht weiter navigieren können.

Beschreibung

  • Der Fokus muss jederzeit durch die Tastaturschnittstelle von einer Komponente entfernt werden können.
  • Ist das Verlassen einer Komponente nicht über Standardmethoden (z. B. Tabulator- oder Pfeiltasten) möglich, muss eine Anleitung zur Navigation bereitgestellt werden.
  • Inhalte, die dieses Erfolgskriterium nicht erfüllen, können die Nutzung der gesamten Webseite unmöglich machen und gelten daher als absolute Störfaktoren.

Anforderungen

  • Implementierung eines klaren und erkennbaren Fokusstatus für alle Steuerelemente.

Code-Beispiele

Beispiel für ein modales Dialogfeld mit Escape-Funktion:
<div role="dialog" aria-modal="true" id="modal" tabindex="-1">
  <p>Dies ist ein modales Dialogfeld.</p>
  <button onclick="closeModal()">Schließen</button>
</div>


<script>
  document.addEventListener('keydown', function (event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  });


  function closeModal() {
    const modal = document.getElementById('modal');
    modal.style.display = 'none';
  }
</script>