Viele Menschen verwenden eine Tastatur oder Software oder Hardware, die die Funktionalität einer Tastatur nachahmt, z. B. ein Switch-Gerät, als primäres Navigationsmittel. Das kann an persönlichen Vorlieben, Effizienz oder defekter Hardware liegen.
Personen mit vorübergehenden körperlichen Einschränkungen, z. B. einer Verstauchung des Handgelenks oder feinmotorischen Behinderungen wie dem Karpaltunnelsyndrom, verwenden möglicherweise eine Tastatur zur Navigation. Nutzer mit eingeschränktem Sehvermögen oder blinde Nutzer verwenden möglicherweise eine Tastatur zur Navigation in Kombination mit einer Vergrößerungs- oder Screenreader-Software. Sie verwenden jedoch möglicherweise andere Tastenkombinationen, um auf einem Bildschirm zu navigieren, als ein sehender Nutzer.
Einige Menschen ohne Behinderungen entscheiden sich möglicherweise auch für die Navigation mit einer Tastatur.
Die Tastaturunterstützung für alle diese Behinderungen und Umstände ist entscheidend. Ein großer Teil der Tastatur-Bedienungshilfe dreht sich um den Fokus. Der Fokus bezieht sich auf das Element auf dem Bildschirm, das aktiv Eingaben von der Tastatur empfängt.
In diesem Modul konzentrieren wir uns auf die HTML-Struktur und das CSS-Styling für Tastatur- und fokussierbare Elemente. Das JavaScript-Modul enthält weitere Informationen zur Fokusverwaltung und zu Tasteneingaben für interaktive Elemente.
Fokusreihenfolge
Die Elemente, zu denen ein Tastaturnutzer navigieren kann, werden als fokussierbare Elemente bezeichnet. Die Fokusreihenfolge, auch Tab- oder Navigationsreihenfolge genannt, ist die Reihenfolge, in der Elemente den Fokus erhalten. Die Standardfokusreihenfolge muss logisch und intuitiv sein und der visuellen Reihenfolge einer Seite entsprechen.
In den meisten Sprachen beginnt die Fokusreihenfolge oben auf der Seite und endet unten, von links nach rechts. Einige Sprachen werden jedoch von rechts nach links gelesen, sodass die primäre Sprache der Seite eine andere Fokusreihenfolge erfordern kann.
Standardmäßig umfasst die Fokusreihenfolge natürlich fokussierbare HTML-Elemente wie Links, Kästchen und Texteingaben. Natürlich fokussierbare HTML-Elemente umfassen die integrierte Unterstützung für die Tab-Reihenfolge und die grundlegende Verarbeitung von Tastaturereignissen.
Sie können die Fokusreihenfolge so aktualisieren, dass sie alle Elemente enthält, die normalerweise keinen Fokus erhalten, z. B. nicht interaktive HTML-Elemente, benutzerdefinierte Komponenten oder Elemente mit ARIA, und die natürliche Fokussemantik überschreiben.
Tabindex
Die Fokusreihenfolge beginnt mit Elementen, die ein positives tabindex Attribut haben (falls vorhanden), und bewegt sich von der kleinsten positiven Zahl zur größten (z. B. 1, 2, 3). Anschließend werden Elemente mit einem tabindex von null in der Reihenfolge im DOM durchlaufen. Alle Elemente mit einem negativen tabindex werden aus der natürlichen Fokusreihenfolge entfernt.
Wenn ein tabindex
von null (tabindex="0") auf normalerweise nicht fokussierbare Elemente angewendet wird, werden sie
entsprechend ihrer Darstellung im DOM in die natürliche Fokusreihenfolge der Seite aufgenommen. Im Gegensatz zu natürlich fokussierbaren HTML-Elementen müssen Sie jedoch
zusätzliche Tastaturunterstützung bereitstellen
damit sie vollständig zugänglich sind.
Wenn Sie ein Element haben, das normalerweise fokussierbar, aber
inaktiv ist, z. B. eine Schaltfläche, die erst funktioniert, wenn ein Eingabefeld ausgefüllt
ist, sollten Sie diesem Element einen negativen tabindex (tabindex="-1") hinzufügen. Durch das Hinzufügen eines negativen tabindex wird Bedienungshilfen und Tastaturen signalisiert, dass diese Schaltfläche aus der natürlichen Fokusreihenfolge entfernt werden soll. Sie können jedoch JavaScript verwenden, um den Fokus bei Bedarf wieder auf das Element zu legen.
In diesem Beispiel wurde Elementen, die normalerweise keinen Fokus erhalten, ein tabindex-Attribut hinzugefügt. Die Reihenfolge der Elemente wurde mit tabindex manipuliert, um zu veranschaulichen, wie stark sich dies auf die Fokusreihenfolge auswirken kann. Das ist ein Beispiel dafür, was Sie nicht tun sollten.
Links überspringen
Die meisten Websites haben heute eine lange Liste von Menülinks im Hauptheader der Seite, die auf allen Seiten gleich ist. Das ist zwar gut für die allgemeine Navigation, kann es aber für Nutzer, die nur die Tastatur verwenden, schwierig machen, ohne mehrmals zu tabben zum Hauptinhalt der Website zu gelangen.
Eine Möglichkeit, redundante oder nutzlose Linkgruppen zu überspringen, ist das Hinzufügen eines Sprunglinks. Sprunglinks sind Ankerlinks, die zu einem anderen Abschnitt derselben Seite springen und die ID dieses Abschnitts verwenden, anstatt den Nutzer zu einer anderen Seite auf der Website oder zu einer externen Ressource zu senden. Sprunglinks werden in der Regel als erstes fokussierbares Element hinzugefügt, das ein Nutzer beim Aufrufen einer Website sieht. Sie können sichtbar oder visuell verborgen sein, bis ein Nutzer zu ihnen tabbt, je nachdem, was das Design erfordert.
Wenn ein Nutzer die Tab-Taste drückt und ein aktiver Sprunglink vorhanden ist, wird der Tastaturfokus auf den Sprunglink gesetzt. Der Nutzer kann auf den Sprunglink klicken und den Header-Abschnitt und die Hauptnavigation überspringen. Wenn er nicht auf den Sprunglink klickt und weiter im DOM tabbt, wird er zum nächsten fokussierbaren Element weitergeleitet.
Wie bei allen Links ist es wichtig, dass der Sprunglink Kontext zum Zweck des Links enthält. Wenn Sie die Formulierung „Zum Hauptinhalt springen“ hinzufügen, weiß der Nutzer, wohin der Link ihn führt. Es gibt viele Codeoptionen, um Ihren Links zusätzlichen Kontext zu geben, z. B.
aria-labelledby, aria-label oder das Hinzufügen
zum Textinhalt des <a> Elements, wie im Beispiel gezeigt.
Fokusanzeige
Wie Sie gerade erfahren haben, ist die Fokusreihenfolge ein wichtiger Aspekt der Tastatur-Bedienungshilfe. Außerdem müssen Sie entscheiden, wie dieser Fokus gestaltet wird. Denn selbst wenn die Fokusreihenfolge hervorragend ist, woher soll ein Nutzer ohne das richtige Styling wissen, wo er sich auf der Seite befindet?
Eine sichtbare Fokusanzeige ist entscheidend, um Nutzer jederzeit darüber zu informieren, wo sie sich auf der Seite befinden. Das ist besonders wichtig für sehende Nutzer, die nur die Tastatur verwenden. „Fokus nicht verdeckt (Minimum)“ sorgt dafür, dass die Fokusanzeige nicht unter anderen Komponenten verborgen ist.
Standardstyling des Browsers
Heute hat jeder moderne Webbrowser ein anderes visuelles Standardstyling, das auf fokussierbare Elemente auf Ihrer Website oder in Ihrer App angewendet wird. Einige sind besser sichtbar als andere. Wenn ein Nutzer durch die Seite tabbt, wird dieses Styling angewendet, sobald das Element den Tastaturfokus erhält.
Wenn Sie dem Browser erlauben, das Fokusstyling zu übernehmen, ist es wichtig, Ihren Code zu überprüfen, um sicherzustellen, dass Ihr Design das Standardstyling des Browsers nicht überschreibt. Eine Überschreibung wird oft als "outline: 0" oder "outline: none" in
Ihrem Stylesheet geschrieben. Dieser kleine Code kann das Standardstyling der Fokusanzeige des Browsers entfernen, was es Nutzern sehr erschwert, auf Ihrer Website oder in Ihrer App zu navigieren.
Nicht empfohlen – keine Umrandung
a:focus { outline: none; /* don't do this! */ }
Empfohlen – gestaltete Umrandung
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Benutzerdefinierte Stile
Natürlich können Sie über den Standardstil des Browsers hinausgehen und eine benutzerdefinierte Fokusanzeige erstellen, die zu Ihrem Design passt. Beim Erstellen einer benutzerdefinierten Fokusanzeige haben Sie viel Freiheit, kreativ zu sein.
Eine Fokusanzeige kann viele Formen annehmen, z. B. eine Umrandung, ein Rahmen, eine Unterstreichung, ein Feld, eine Änderung des Hintergrunds oder eine andere offensichtliche stilistische Änderung, die nicht nur auf Farbe basiert, um anzuzeigen, dass der Tastaturfokus auf diesem Element aktiv ist.
Sie können den Stil der Fokusanzeige ändern, damit sie sichtbar ist. Wenn eine Seite beispielsweise einen weißen Hintergrund hat, können Sie die Fokusanzeige der Schaltfläche auf einen blauen Hintergrund setzen. Wenn die Seite einen blauen Hintergrund hat, können Sie denselben Fokusstil für die Schaltfläche auf einen weißen Hintergrund setzen.
Sie können den Stil des Fokuselements je nach Elementtyp ändern. Sie können beispielsweise eine gepunktete Unterstreichung für Links im Textkörper verwenden, aber einen abgerundeten Rahmen für ein Schaltflächenelement auswählen.
Es gibt keine Regel, wie viele Fokusanzeigestile Sie auf einer Seite haben können. Achten Sie jedoch darauf, dass es eine angemessene Anzahl ist, um unnötige Verwirrung zu vermeiden.