Semantische HTML-Elemente für eine einfache Bedienung per Tastatur verwenden

Rob Dodson

Wenn Sie die richtigen semantischen HTML-Elemente verwenden, können Sie möglicherweise die meisten oder alle Anforderungen an die Tastaturbedienung erfüllen. So brauchst du weniger Zeit für die tabindex und hast mehr zufriedene Nutzer.

Tastaturunterstützung für kostenlose (und bessere) mobile Nutzung

Es gibt eine Reihe von integrierten interaktiven Elementen mit der richtigen Semantik und Tastaturunterstützung. Die am häufigsten verwendeten sind:

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

Es ist leicht, die integrierte Tastaturunterstützung zu übersehen, die diese Elemente bieten. Unten finden Sie einige Beispiele für Elemente, die Sie sich ansehen können. Verwenden Sie stattdessen die Tastatur. Mit TAB (oder SHIFT + TAB) können Sie zwischen Steuerelementen wechseln. Mit den Pfeiltasten und Tasten wie ENTER und SPACE können Sie ihre Werte ändern.

Wenn Sie ein Smartphone zur Hand haben, können Sie sehen, dass diese integrierten Elemente auf Mobilgeräten oft einzigartige Interaktionen ermöglichen. Diese mobilen Interaktionen selbst nachzubilden ist sehr aufwendig. Das ist ein weiterer guter Grund, möglichst integrierte Elemente zu verwenden.

button anstelle von div verwenden

Ein häufiges Anti-Pattern für die Barrierefreiheit besteht darin, ein nicht interaktives Element wie ein div oder ein span als Schaltfläche zu behandeln, indem ein Klick-Handler hinzugefügt wird.

Damit eine Schaltfläche als barrierefrei gilt, muss sie jedoch folgende Anforderungen erfüllen:

  • Mit der Tastatur fokussierbar sein
  • Support deaktiviert
  • Unterstützung der Tasten ENTER oder SPACE zum Ausführen einer Aktion
  • Von einem Screenreader richtig angesagt werden

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

Für button-Elemente gibt es beispielsweise einen praktischen Trick namens *Aktivierung durch synthetischen Klick*. Wenn Sie einem button einen „click“-Handler hinzufügen, wird er ausgeführt, wenn der Nutzer ENTER oder SPACE drückt. Eine div-Schaltfläche hat diese Funktion nicht. Sie müssen also zusätzlichen Code schreiben, um auf das keydown-Ereignis zu warten, zu prüfen, ob der Tastencode ENTER oder SPACE ist, und dann den Click-Handler auszuführen. Autsch! Das ist viel zusätzliche Arbeit.

Vergleichen Sie die Differenz in diesem Beispiel. TAB, um sie zu steuern, und ENTER und SPACE, um darauf zu klicken.

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

Ein weiteres häufiges Antipattern besteht darin, Links als Schaltflächen zu behandeln, indem JavaScript-Verhalten daran angehängt wird.

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

Sowohl Schaltflächen als auch Links unterstützen eine Form der synthetischen Klickaktivierung. Welche Option sollten Sie also wä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 weitergeleitet wird, verwenden Sie <a>. Dazu gehören auch Single-Page-Web-Apps, die neue Inhalte laden und die URL über die History API aktualisieren.

Der Grund dafür ist, dass Schaltflächen und Links von Screenreadern unterschiedlich angekündigt werden. Wenn Sie das richtige Element verwenden, wissen Screenreader-Nutzer, welches Ergebnis sie erwarten können.

TODO: DevSite - Think and Check assessment

Stile

Einige integrierte Elemente, insbesondere <input>, lassen sich nur schwer formatieren. Mit etwas cleverem CSS lassen sich einige dieser Einschränkungen möglicherweise umgehen. Das (lustig benannte) WTFForms-Projekt enthält ein Beispiel-Stylesheet, in dem eine Reihe von Techniken zum Gestalten einiger der schwierigeren integrierten Elemente demonstriert werden.

Nächste Schritte

Durch die Verwendung integrierter HTML-Elemente können Sie die Barrierefreiheit Ihrer Website erheblich verbessern und den Arbeitsaufwand deutlich reduzieren. Tabben Sie durch Ihre Website und suchen Sie nach Steuerelementen, die keine Tastaturunterstützung bieten. Ersetzen Sie sie nach Möglichkeit durch standardisierte HTML-Alternativen.

Manchmal gibt es Elemente, die kein Gegenstück in HTML haben. Kein Problem! Im Folgenden erfahren Sie, wie Sie benutzerdefinierten interaktiven Steuerelementen mit tabindex Tastaturunterstützung hinzufügen.