Viele Menschen verwenden eine Tastatur – oder andere Software/Hardware, die den Funktionen einer Tastatur, z. B. eines Schalters, als primäres Mittel zur Navigation. Personen mit vorübergehenden körperlichen Einschränkungen, z. B. einem verstauchten Handgelenk oder Feinmotorik, wie der Karpaltunnel, oder auch Menschen ohne Behinderungen, verwenden aufgrund ihrer persönlichen Präferenz, Effizienz oder defekte Hardware.
Nutzer mit eingeschränktem Sehvermögen oder blinde Nutzer können zur Navigation eine Tastatur in Kombination mit Vergrößerungs- oder Screenreader-Software nutzen. Sie verwenden jedoch möglicherweise unterschiedliche Tastenkombinationen zur Navigation auf einem Bildschirm als sehende Nutzende.
Die Tastaturunterstützung für all diese Beeinträchtigungen und Umstände ist entscheidend. A liegt ein großer Teil der Bedienungshilfen auf der Tastatur auf dem Fokus. Fokus bezieht sich darauf, welches Element auf dem Bildschirm empfängt derzeit Eingabe über die Tastatur.
In diesem Modul konzentrieren wir uns auf die HTML-Struktur und die CSS-Stile Tastatur und fokussierbaren Elementen. Die Das JavaScript-Modul enthält mehr Informationen zum Fokusmanagement und zu den Tastenanschlägen für interaktive Elemente.
Fokusreihenfolge
Die Elemente, zu denen Tastaturnutzer navigieren können, werden als fokussierbar bezeichnet. Elemente. Fokusreihenfolge auch Tab- oder Navigationsreihenfolge genannt, ist die Reihenfolge, fokussiert. Die standardmäßige Fokusreihenfolge muss logisch und intuitiv sein und dem visuellen Reihenfolge einer Seite.
Bei den meisten Sprachen beginnt die Fokusreihenfolge oben auf der Seite und endet unten auf der Seite, 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 gerechtfertigt ist.
Standardmäßig umfasst die Fokusreihenfolge fokussierbare HTML-Elemente wie Links, Kästchen und Texteingaben. Zu den natürlich fokussierbaren HTML-Elementen gehören: integrierte Unterstützung für die Tab-Reihenfolge und die grundlegende Verarbeitung von Tastaturereignissen.
Sie können die Fokusreihenfolge aktualisieren, um alle Elemente einzuschließen, die normalerweise nicht nicht interaktive HTML-Elemente, benutzerdefinierte Komponenten oder mit ARIA, die den Semantik des natürlichen Fokus.
Tabindex
Die Fokusreihenfolge beginnt mit den Elementen, die eine positive Tabindex (falls vorhanden) und verschiebt sich von der kleinsten positiven Zahl am größten (z. B. 1, 2, 3). Dann durchläuft es Elemente mit einem Null entsprechend ihrer Reihenfolge im DOM. Alle Elemente mit einem negativen Tabindex aus der natürlichen Fokusreihenfolge entfernt.
Wenn ein tabindex
auf normalerweise nicht fokussierbare Elemente angewendet wird, tabindex="0"
werden je nach Anzeige in der natürlichen Fokusreihenfolge auf der Seite platziert.
im DOM. Im Gegensatz zu natürlich fokussierbaren HTML-Elementen müssen Sie
Support für zusätzliche Tastaturen
damit sie vollständig zugänglich sind.
Wenn Sie ein Element haben, das normalerweise fokussierbar ist,
inaktiv, z. B. eine Schaltfläche, die nicht aktiv ist, bis ein Eingabefeld gefüllt wird
in – Sie sollten diesem Element einen negativen Tabindex (tabindex="-1") hinzufügen. Wird hinzugefügt
negative Tabindex-Werte an Hilfstechnologien und Tastaturen erkennen,
sollte aus der natürlichen Fokusreihenfolge entfernt werden. Aber keine Sorge, Sie können
Verwenden Sie JavaScript, um den Fokus bei Bedarf wieder auf das Element zu setzen.
In diesem Beispiel wurde ein tabindex-Attribut zu Elementen hinzugefügt, die nicht
natürlich in den Fokus rücken. Die Reihenfolge der Elemente wurde mithilfe von
tabindex, um zu veranschaulichen, wie stark sie die Fokusreihenfolge haben kann. Dies ist ein
was man besser vermeiden sollte.
Links überspringen
Auf den meisten Websites gibt es heute eine lange Liste mit Links zu Speisekarten in der Kopfzeile der Seite. von Seite zu Seite einheitlich sein. Das ist sehr gut für die allgemeine Navigation, Nutzern, die nur mit einer Tastatur arbeiten, ist es schwierig, einfach auf die Hauptseite der Website zu gelangen. ohne mehrfache Tabulatortaste drücken zu müssen.
Eine Möglichkeit, überflüssige oder unnütze Link-Gruppen zu überwinden, besteht darin, eine Link überspringen auswählen. Sprunglinks sind Ankerlinks springen, die zu einem anderen Abschnitt auf derselben Seite ID, anstatt den Nutzer auf eine andere Seite der Website oder eine externe . Sprunglinks werden in der Regel als erstes fokussierbares Element hinzugefügt, das Nutzende beim Aufrufen einer Website auftreten und können sichtbar oder visuell verborgen sein. bis Nutzende darauf zugreifen, je nachdem, was das Design erfordert.
Wenn ein Nutzer die Tabulatortaste drückt und ein aktiver Link zum Überspringen vorhanden ist, mit der Tastatur auf den Link zum Überspringen. Die Nutzenden können auf den Link zum Überspringen klicken und nach der Überschrift und der Hauptnavigation. Möchte er das nicht tun, überspringen und mit der Tabulatortaste im DOM weiter nach unten gehen, werden sie zum nächsten fokussierbares Element.
Wie bei allen Links ist es auch hier wichtig, dass der Link zum Überspringen Kontext zum Inhalt des
den Zweck des Links aus. Durch Hinzufügen der Wortgruppe „Zum Hauptinhalt springen“ informiert die Nutzenden darüber,
wohin sie über den Link führen. Es gibt viele Codeoptionen zur Auswahl, wenn
mit zusätzlichem Kontext zu Ihren Links, z. B.
aria-labeledby
aria-label erstellen oder hinzufügen
zum Textinhalt des <a>-Elements hinzu, wie im Beispiel gezeigt.
Fokusanzeige
Wie Sie gerade wissen, ist die Fokusreihenfolge ein wichtiger Aspekt der Tastatur. Barrierefreiheit. Außerdem ist es wichtig, zu entscheiden, wie dieser Fokus gestaltet werden soll. Weil Auch wenn die Fokusreihenfolge hervorragend ist, wie können Nutzende wissen, wo sie sich befinden nicht den richtigen Stil?
Eine sichtbare Fokusanzeige ist ein unverzichtbares Werkzeug, um Nutzende darüber zu informieren, wo sie sich auf der Seite. Dies ist besonders für sehende Benutzer mit der Tastatur wichtig.
Standardstil des Browsers
Heutzutage verfügt jeder moderne Webbrowser über einen anderen visuellen Stil, gilt für fokussierbare Elemente auf Ihrer Website oder in Ihrer App, von denen einige besser sichtbar sind. als andere. Wenn ein Nutzer mit der Tabulatortaste durch die Seite navigiert, wird dieser Stil als -Element erhält Tastaturfokus.
Wenn Sie zulassen, dass der Browser den Fokusstil selbst übernimmt, sollten Sie sich
Ihren Code, um zu bestätigen, dass Ihr Design die Standardeinstellungen des Browsers nicht überschreibt.
Stile. Eine Überschreibung wird häufig als "outline: 0" oder "outline: none" geschrieben,
Ihrem Stylesheet hinzugefügt. Mit diesem winzigen Code-Snippet können Sie den Standardfokus des Browsers
Dadurch wird es für Nutzende sehr schwierig,
Website oder App.
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 Stile
Natürlich können Sie auch einen benutzerdefinierten Stil Fokusanzeige, die zu Ihrem Thema passt. Beim Erstellen eines benutzerdefinierten Fokus haben Sie viele Freiheiten, kreativ zu sein!
Eine Fokusanzeige kann viele Formen annehmen, sei es ein Umriss, ein Rahmen, Unterstreichungen, ein Feld, eine Hintergrundänderung oder eine andere offensichtliche Stiländerung der nicht nur auf Farbe zurückgreift, um anzuzeigen, dass der Tastaturfokus aktiv ist. für dieses Element.
Sie können den Stil eines Fokusindikators ändern, damit er nicht im Hintergrund. Für Seiten mit weißem Hintergrund könnten Sie beispielsweise der Fokusanzeige auf einen blauen Hintergrund. Wenn die Seite ein blaues Hintergrund verwenden, könnten Sie denselben Fokusstil für die Schaltfläche auf einen weißen Hintergrund setzen.
Sie können den Stil des Fokuselements basierend auf dem Elementtyp ändern. Beispiel: können Sie für Body-Links eine gepunktete Unterstreichung verwenden, ein Schaltflächenelement.
Es gibt keine Regel dazu, wie viele Fokusanzeige-Stile auf einem einzelnen Stil verwendet werden. Sie sollten sich aber auf eine vernünftige Anzahl beschränken, um unnötige Verwirrung stiften.
Zusammenfassung
Damit eine Website oder App als barrierefrei gilt, sind alle Funktionen, Der Zugriff mit einer Maus muss auch mit einer Tastatur erfolgen. Dieses Modul auf den visuellen Aspekt der Tastaturbedienung, insbesondere auf den Fokus und Fokusindikatoren.
Wissen testen
Testen Sie Ihr Wissen über ARIA und HTML
Welches CSS-Stil-Beispiel :focus ist auf weißem Hintergrund am besten barrierefrei?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Wozu dient ein Sprunglink?