Semantisches HTML für einfache Tastatureingaben

Rob Dodson

Mit den richtigen semantischen HTML-Elementen können Sie die meisten oder alle Zugriffsanforderungen für die Tastatur erfüllen. Das bedeutet, dass Sie weniger Zeit mit tabindex verbringen müssen und mehr zufriedene Nutzer haben.

Kostenloser Tastatur-Support (und eine bessere Nutzererfahrung auf Mobilgeräten)

Es gibt eine Reihe integrierter interaktiver Elemente mit geeigneter Semantik und Tastaturunterstützung. Von den meisten Entwicklern werden die folgenden Funktionen verwendet:

Darüber hinaus werden für die Texteingabe im freien Format manchmal Elemente mit dem Attribut contenteditable verwendet.

Die integrierte Tastaturunterstützung, die diese Elemente bieten, übersieht man schnell. Im Folgenden finden Sie einige Beispielelemente, die Sie untersuchen können. Bedienen Sie sie statt mit der Maus mit der Tastatur. Mit TAB (oder SHIFT + TAB) können Sie zwischen Steuerelementen wechseln und mit den Pfeiltasten und -tasten wie ENTER und SPACE können Sie deren Werte ändern.

Wenn Sie ein Smartphone zur Hand haben, können Sie sehen, dass diese integrierten Elemente auf Mobilgeräten oft individuelle Interaktionen ermöglichen. Der Versuch, diese mobilen Interaktionen selbst zu reproduzieren, ist eine Menge Arbeit! Ein weiterer Grund, sich bei integrierten Elementen zu orientieren.

button anstelle von div verwenden

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

Damit eine Schaltfläche barrierefrei ist, muss sie folgende Kriterien erfüllen:

  • Fokussierung über die Tastatur möglich
  • Support wird deaktiviert
  • Die Tasten ENTER oder SPACE unterstützen, um eine Aktion auszuführen
  • von einem Screenreader korrekt vorgelesen werden.

Eine div-Schaltfläche enthält keines dieser Elemente. Das bedeutet, dass Sie zusätzlichen Code schreiben müssen, um die Möglichkeiten des button-Elements kostenlos zu replizieren.

button-Elemente haben beispielsweise einen praktischen Trick, der als *Aktivierung synthetischer Klicks* bezeichnet wird. Wenn Sie einem button einen Klick-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 Schlüsselcode ENTER oder SPACE lautet, und dann den Klick-Handler ausführen. Autsch! Das ist viel Mehraufwand!

Vergleichen Sie den Unterschied in diesem Beispiel. TAB für das Steuerelement und verwenden Sie ENTER und SPACE, um darauf zu klicken.

Wenn du auf deiner Website oder in deiner App div-Schaltflächen verwendest, kannst du sie durch button-Elemente ersetzen. button ist einfach zu gestalten und bietet viele Vorteile für Barrierefreiheit.

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

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

Sowohl Schaltflächen als auch Links unterstützen eine Form der synthetischen Klickaktivierung. Wofür sollten Sie sich entscheiden?

  • Wenn durch einen Klick auf das Element eine Aktion auf der Seite ausgeführt wird, verwenden Sie <button>.
  • Wenn ein Nutzer auf das Element klickt, wird er auf eine neue Seite geleitet und dann <a> verwendet. Dies gilt auch für einseitige Web-Apps, die mithilfe der History API neue Inhalte laden und die URL aktualisieren.

Der Grund dafür ist, dass Schaltflächen und Links von Screenreadern anders angesagt werden. Mit dem richtigen Element können Screenreader-Nutzer wissen, welches Ergebnis sie erwarten können.

AUFGABE: DevSite - Think and Check-Bewertung

Stile

Die Gestaltung einiger integrierter Elemente, insbesondere <input>, kann schwierig sein. Mit ein wenig cleveren CSS können Sie einige dieser Einschränkungen umgehen. Das (urkomisch benannte) Projekt WTFForms enthält ein Beispiel-Stylesheet, das eine Reihe von Techniken für die Gestaltung einiger schwieriger integrierter Elemente zeigt.

Nächste Schritte

Die Verwendung integrierter HTML-Elemente kann die Zugänglichkeit Ihrer Website erheblich verbessern und Ihren Arbeitsaufwand erheblich reduzieren. Suchen Sie mit der Tabulatortaste durch Ihre Website und suchen Sie nach Steuerelementen, die keine Tastaturunterstützung haben. Tauschen Sie sie nach Möglichkeit gegen standardisierte HTML-Alternativen aus.

Es kann vorkommen, dass Sie auf ein Element stoßen, für das es in HTML kein Pendant gibt. Kein Problem! Im Folgenden erfahren Sie, wie Sie mit tabindex die Tastaturunterstützung für benutzerdefinierte interaktive Steuerelemente hinzufügen.