Viele Nutzer verwenden als primäres Navigationsmittel eine Tastatur oder andere Software/Hardware, die die Funktionalität einer Tastatur imitiert, z. B. einen Schalter. Menschen mit vorübergehenden körperlichen Einschränkungen wie ein verstauchtes Handgelenk oder eine Feinmotorik (z. B. Karpaltunnel) sowie einige Menschen ohne Behinderungen können aufgrund ihrer persönlichen Vorlieben, ihrer Effizienz oder aufgrund von defekter Hardware möglicherweise eine Tastatur verwenden, um auf einer Seite zu navigieren.
Nutzer mit eingeschränktem Sehvermögen oder blinde Nutzer können zur Navigation in Kombination mit ihrer Vergrößerungs- oder Screenreader-Software eine Tastatur verwenden. Sie können jedoch andere Tastenkürzel zur Navigation auf einem Bildschirm verwenden als ein sehender Nutzer.
Die Tastaturunterstützung ist für all diese Beeinträchtigungen und Umstände von entscheidender Bedeutung. Bei der Tastaturbedienung geht es größtenteils um den Fokus. Der Fokus bezieht sich darauf, welches Element auf dem Bildschirm gerade Tastatureingaben empfängt.
In diesem Modul geht es um HTML-Struktur und CSS-Stile für Tastatur- und fokussierbare Elemente. Das JavaScript-Modul enthält weitere Informationen zur Fokusverwaltung und zu Tastenkombinationen 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 fokussiert werden. Die standardmäßige Fokusreihenfolge muss logisch und intuitiv sein und der visuellen Reihenfolge einer Seite entsprechen.
Bei den meisten Sprachen beginnt die Fokusreihenfolge oben auf der Seite und endet unten, also von links nach rechts. Einige Sprachen werden jedoch von rechts nach links gelesen, sodass für die Hauptsprache der Seite möglicherweise eine andere Fokusreihenfolge erforderlich ist.
Standardmäßig umfasst die Fokusreihenfolge natürlich fokussierbare HTML-Elemente wie Links, Kästchen und Texteingaben. Zu den natürlich fokussierbaren HTML-Elementen gehören eine integrierte Unterstützung für die TAB-Reihenfolge und eine grundlegende Verarbeitung von Tastaturereignissen.
Sie können die Fokusreihenfolge so ändern, dass alle Elemente einbezogen werden, die normalerweise nicht hervorgehoben werden, z. B. nicht interaktive HTML-Elemente, benutzerdefinierte Komponenten oder Elemente mit ARIA, die die Semantik für den organischen Fokus überschreiben.
Tabindex
Die Fokusreihenfolge beginnt mit Elementen mit einem positiven tabindex-Attribut (falls vorhanden) und geht von der kleinsten positiven Zahl zur größten (z. B. 1, 2, 3) über. Anschließend geht es durch Elemente mit einem Tabindex von null gemäß ihrer Reihenfolge im DOM. Alle Elemente mit negativem Tabindex werden aus der ursprünglichen Fokusreihenfolge entfernt.
Wenn ein Tabindex von null (tabindex="0") auf Elemente angewendet wird, die normalerweise nicht fokussierbar sind, werden sie entsprechend der Darstellung im DOM in der natürlichen Fokusreihenfolge der Seite hinzugefügt. Im Gegensatz zu natürlich fokussierbaren HTML-Elementen müssen Sie zusätzliche Tastaturunterstützung bieten, damit Sie vollständig darauf zugreifen können.
Ähnlich verhält es sich mit einem Element, das normalerweise fokussierbar, aber inaktiv ist (z. B. eine Schaltfläche, die nicht aktiv ist, bis ein Eingabefeld ausgefüllt ist). In diesem Fall sollten Sie diesem Element einen negativen Tabindex (tabindex="-1") hinzufügen. Ein negativer Tabindex signalisiert Hilfstechnologien und Tastaturen, dass diese Schaltfläche aus der natürlichen Fokusreihenfolge entfernt werden sollte. Aber keine Sorge, Sie können JavaScript verwenden,
um den Fokus bei Bedarf wieder auf das Element zu legen.
In diesem Beispiel wurde Elementen, die normalerweise nicht im Fokus stehen, das Attribut tabindex hinzugefügt. Die Reihenfolge der Elemente wurde mithilfe von tabindex geändert, um zu veranschaulichen, welche Macht sie für die Fokusreihenfolge haben kann. Dies ist ein Beispiel dafür, was Sie nicht tun sollten.
Links überspringen
Heutzutage haben die meisten Websites eine lange Liste mit Menülinks im Hauptheader, die von Seite zu Seite einheitlich sind. Das eignet sich hervorragend für die allgemeine Navigation, erschwert es aber Nutzern, die nur mit der Tastatur arbeiten, leicht zu den Hauptinhalten der Website zu gelangen, ohne mehrmals die Tabulatortaste drücken zu müssen.
Eine Möglichkeit, über redundante oder unnütze Gruppen von Links zu springen, besteht darin, einen Überspringen-Link hinzuzufügen. Sprunglinks sind Ankerlinks, die mithilfe der ID dieses Abschnitts zu einem anderen Abschnitt der gleichen Seite springen, anstatt den Nutzer zu einer anderen Seite der Website oder einer externen Ressource zu leiten. Sprunglinks werden in der Regel als erstes fokussierbares Element hinzugefügt, auf das ein Nutzer beim Aufruf einer Website stößt. Je nachdem, was das Design erfordert, können diese Links sichtbar oder visuell ausgeblendet sein, bis der Nutzer darauf klickt.
Wenn ein Nutzer die Tabulatortaste drückt und ein aktiver Link zum Überspringen vorhanden ist, wird der Tastaturfokus auf den Link zum Überspringen gesendet. Die Nutzenden können auf den Link klicken und über den Header-Abschnitt und die Hauptnavigation springen. Wenn sie nicht auf den Link zum Überspringen klicken und mit der Tabulatortaste nach unten im DOM fortfahren, werden sie zum nächsten fokussierbaren Element weitergeleitet.
Wie alle Links muss auch der Link zum Überspringen Kontext zum Zweck des Links enthalten. Durch das Hinzufügen des Satzes „Skip to main content“ (Zum Hauptinhalt springen) weiß der Nutzer, wohin der Link ihn führt. Es gibt viele Codeoptionen, aus denen Sie auswählen können, wenn Sie zusätzlichen Kontext für Ihre Links zur Verfügung stellen, z. B. aria-labelledby oder aria-label, oder um den Code zum Textinhalt des <a>-Elements hinzuzufügen, wie im Beispiel gezeigt.
Fokusanzeige
Wie Sie gerade gelernt haben, ist die Fokusreihenfolge ein wichtiger Aspekt der Bedienungshilfen. Es ist auch wichtig, den Stil dieses Fokus festzulegen. Denn selbst wenn die Fokusreihenfolge hervorragend ist, wie kann ein Nutzer ohne richtigen Stil erkennen, wo er sich auf der Seite befindet?
Ein sichtbarer Fokusindikator ist ein wichtiges Tool, mit dem Nutzer darüber informiert werden, wo sie sich jederzeit auf der Seite befinden. Dies ist besonders wichtig für sehende Nutzer, die nur mit der Tastatur arbeiten.
Standardstil des Browsers
Heutzutage hat jeder moderne Webbrowser einen anderen visuellen Standardstil, der fokussierbare Elemente auf Ihrer Website oder in Ihrer App anwendet und einige besser sichtbar ist als andere. Wenn ein Nutzer durch die Seite scrollt, wird dieser Stil angewendet, wenn das Element Tastaturfokus erhält.
Wenn Sie zulassen, dass der Browser den Fokusstil verarbeitet, müssen Sie Ihren Code überprüfen, um sicherzustellen, dass Ihr Design die Standardstilart des Browsers nicht überschreibt. Eine Überschreibung wird im Stylesheet häufig als "outline: 0" oder "outline: none" geschrieben. Durch dieses winzige Code-Snippet kann der standardmäßige Fokusanzeige-Stil des Browsers entfernt werden, was Nutzern die Navigation auf Ihrer Website oder in Ihrer App sehr erschwert.
a:focus {
outline: none; /* don't do this! */
}
a:focus {
outline: auto 5px Highlight; /* for non-webkit browsers */
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}
Benutzerdefinierte Designs
Natürlich können Sie auch einen benutzerdefinierten Fokusindikator erstellen, der zu Ihrem Design passt. Beim Erstellen einer benutzerdefinierten Fokusanzeige können Sie kreativ sein.
Eine Fokusanzeige kann viele Formen annehmen, z. B. einen Umriss, einen Rahmen, eine Unterstreichung, einen Rahmen, eine Hintergrundänderung oder eine andere offensichtliche stilistische Änderung, die nicht nur auf Farbe angewiesen ist, um anzuzeigen, dass der Fokus der Tastatur auf diesem Element aktiv ist.
Sie können den Stil der Fokusanzeige ändern, damit er im Hintergrund nicht verloren geht. Wenn eine Seite beispielsweise einen weißen Hintergrund hat, kannst du die Fokusanzeige 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 festlegen.
Sie können den Stil des Fokuselements basierend auf dem Elementtyp ändern. So können Sie z. B. Textlinks mit gepunkteter Unterstreichung verwenden, aber für Schaltflächenelemente einen abgerundeten Rahmen wählen.
Es gibt keine Regel dafür, wie viele Fokusindikator-Stile Sie auf einer Seite haben. Achten Sie aber darauf, einen angemessenen Wert zu wählen, um unnötige Verwirrung zu vermeiden.
Zusammenfassung
Damit eine Website oder App als barrierefrei gilt, müssen alle Inhalte, auf die mit der Maus zugegriffen werden kann, auch über die Tastatur aufgerufen werden. In diesem Modul ging es um den visuellen Aspekt der Tastaturbedienung, insbesondere die Fokusreihenfolge und Fokusanzeigen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über ARIA und HTML
Welches der CSS-Stile von :focus ist auf weißem Hintergrund am besten zugänglich?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Was ist der Zweck eines Links zum Überspringen?