Zum Inhalt springen
44 Barrierefreiheit Dokumentation

2.1.1 - Bedienbarkeit mit Tastatur

A 2.0 Umsetzung

Ziel

Alle Funktionen einer Webseite oder Anwendung sollen ausschließlich über die Tastatur bedienbar sein, ohne zeitliche Einschränkungen für Tastenanschläge.

Beschreibung

  • Inhalte und Funktionen müssen vollständig über eine Tastaturschnittstelle zugänglich sein.
  • Zeitabhängige Tastaturaktionen oder Anforderungen an eine Bewegungsrichtung (z. B. Freihandzeichnen) sind ausgenommen.
  • Die Bedienung mittels Maus, Touchscreen oder anderer Geräte ist zusätzlich erlaubt, aber nicht verpflichtend.

Anforderungen

  • Vermeidung von Designs, die ausschließlich auf Zeigegeräte angewiesen sind (z. B. Drag & Drop ohne Tastaturalternative).

Code-Beispiele

Beispiel für ARIA-Attribute bei einem benutzerdefinierten Steuerelement:
<div role="button" tabindex="0" onkeydown="if (event.key === 'Enter') handleAction();" onclick="handleAction();">
  Benutzerdefinierter Button
</div>
Beispiel für eine Drag & Drop-Alternative:
<ul>
  <li tabindex="0" onkeydown="moveItemUp(this)">Eintrag 1</li>
  <li tabindex="0" onkeydown="moveItemUp(this)">Eintrag 2</li>
</ul>


<script>
  function moveItemUp(item) {
    const parent = item.parentNode;
    const previous = item.previousElementSibling;
    if (previous) {
      parent.insertBefore(item, previous);
    }
  }
</script>