Semantisches HTML für einfache Tastatureingaben

Rob Dodson

Mit den richtigen semantischen HTML-Elementen können Sie die meisten oder alle Anforderungen an den Tastaturzugriff erfüllen. Das bedeutet weniger Zeit für die Fehlerbehebung bei tabindex und zufriedenere Nutzer.

Kostenlose Tastaturunterstützung und bessere Nutzerfreundlichkeit auf Mobilgeräten

Es gibt eine Reihe von integrierten interaktiven Elementen mit korrekter Semantik und Tastaturunterstützung. Die meisten Entwickler verwenden diese:

Außerdem werden Elemente mit dem Attribut contenteditable manchmal für die Eingabe von freien Text verwendet.

Die integrierte Tastaturunterstützung dieser Elemente wird leicht übersehen. Im Folgenden finden Sie einige Beispiele. Versuchen Sie, die Maus durch die Tastatur zu ersetzen. Mit TAB (oder SHIFT + TAB) können Sie zwischen den Steuerelementen wechseln. Mit den Pfeiltasten und Tasten wie ENTER und SPACE können Sie die Werte ändern.

Wenn Sie ein Smartphone zur Hand haben, können Sie sehen, dass diese integrierten Elemente auf Mobilgeräten oft einzigartige Interaktionen haben. Es ist sehr aufwendig, diese mobilen Interaktionen selbst nachzuvollziehen. Das ist ein weiterer guter Grund, nach Möglichkeit auf integrierte Elemente zu setzen.

button anstelle von div verwenden

Ein gängiges Anti-Muster für Barrierefreiheit ist es, ein nicht interaktives Element wie ein div oder ein span als Schaltfläche zu behandeln, indem ihm ein Klick-Handler hinzugefügt wird.

Damit eine Schaltfläche als barrierefrei gilt, muss sie:

  • Sie können über die Tastatur fokussiert werden.
  • Support wird deaktiviert
  • Unterstützung der Tasten ENTER oder SPACE zum Ausführen einer Aktion
  • Sie werden von einem Screenreader richtig angesagt.

Eine div-Schaltfläche hat keines dieser Elemente. Das bedeutet, dass Sie zusätzlichen Code schreiben müssen, um das zu replizieren, was das button-Element kostenlos bietet.

button-Elemente bieten beispielsweise die praktische Funktion Synthetische Klickaktivierung. Wenn Sie einem button einen „click“-Handler hinzufügen, wird dieser ausgeführt, wenn der Nutzer auf ENTER oder SPACE drückt. Eine div-Schaltfläche bietet diese Funktion nicht. Sie müssen also zusätzlichen Code schreiben, um auf das keydown-Ereignis zu warten, zu prüfen, ob der Schlüsselcode ENTER oder SPACE ist, und dann den Klick-Handler auszuführen. Autsch! Das ist eine Menge zusätzliche Arbeit!

Vergleichen Sie den Unterschied in diesem Beispiel. TAB, um sie zu steuern, und ENTER und SPACE, um zu versuchen, sie anzuklicken.

Wenn Sie auf Ihrer Website oder in Ihrer App div-Schaltflächen haben, sollten Sie sie durch button-Elemente ersetzen. button ist einfach zu gestalten und bietet viele Vorteile in Bezug auf Barrierefreiheit.

Ein weiteres häufiges Anti-Muster besteht darin, Links als Schaltflächen zu behandeln, indem ihnen JavaScript-Verhalten zugewiesen wird.

<a href="#" onclick="// perform some action">

Sowohl Schaltflächen als auch Links unterstützen eine gewisse Form der synthetischen Klickaktivierung. Welche sollten Sie also auswählen?

  • Wenn durch Klicken auf das Element eine Aktion auf der Seite ausgeführt wird, verwenden Sie <button>.
  • Wenn der Nutzer durch Klicken auf das Element zu einer neuen Seite wechseln kann, verwenden Sie <a>. Dazu gehören auch einseitige Web-Apps, die neue Inhalte laden und die URL über die Verlaufs-API aktualisieren.

Das liegt daran, dass Schaltflächen und Links von Screenreadern unterschiedlich angesagt werden. Wenn Sie das richtige Element verwenden, wissen Nutzer von Screenreadern, welches Ergebnis sie erwarten können.

TODO: DevSite – Bewertung „Überlegen und prüfen“

Stile

Einige integrierte Elemente, insbesondere <input>, können nur schwer gestaltet werden. Mit etwas cleverem CSS können Sie möglicherweise einige dieser Einschränkungen umgehen. Das (lustig benannte) Projekt WTFForms enthält ein Beispiel-Stylesheet, in dem verschiedene Techniken zum Stylen einiger der schwierigeren integrierten Elemente veranschaulicht werden.

Nächste Schritte

Mithilfe von integrierten HTML-Elementen lässt sich die Barrierefreiheit Ihrer Website erheblich verbessern und Ihre Arbeitslast deutlich reduzieren. Gehen Sie mit der Tabulatortaste durch Ihre Website und suchen Sie nach Steuerelementen, die nicht über eine Tastatur unterstützt werden. Ersetzen Sie sie wenn möglich durch standardisierte HTML-Alternativen.

Manchmal finden Sie ein Element, das in HTML kein Pendant hat. Kein Problem! Im Folgenden erfahren Sie, wie Sie benutzerdefinierten interaktiven Steuerelementen mit tabindex Tastaturunterstützung hinzufügen.