Best Practices für die Barrierefreiheit der Tastatur
Eine Hilfstechnologie, die uns allen zur Verfügung steht, ist die Tastatur. Allein mit der Tastatur sollte jeder in der Lage sein, zu navigieren und eine online verfügbare Aufgabe zu erledigen, so wie es ein Mausbenutzer tun würde.
Für einige Menschen, insbesondere für Menschen mit einer motorischen Beeinträchtigung , die keine Maus oder kein Trackpad verwenden können, ist die Tastatur die primäre Methode, um im Internet zu navigieren und mit Benutzeroberflächen zu interagieren.
Das Tolle an der Tastatur ist, dass die meisten von uns wahrscheinlich ziemlich vertraut mit diesem Gerät sind, was das Testen mit einer Tastatur allein ziemlich einfach macht.
Werfen wir einen Blick auf einige Möglichkeiten, um die Zugänglichkeit für Nur-Tastatur-Benutzer sicherzustellen.
Fokusanzeige
Eine der grundlegendsten Hilfen, die Benutzern hilft, sich mühelos und sicher in einer App zurechtzufinden (und standardmäßig in jede Website integriert ist), ist die Fokusanzeige.
Was ist der Fokusindikator? Es ist der visuelle Indikator dafür, wo Sie sich gerade auf einer Seite befinden, wenn Sie nur mit der Tastatur navigieren. Stellen Sie sich die Fokusanzeige als Mauszeiger für die Tastatur vor!
Laden Sie Ihre Lieblingsseite hoch und beginnen Sie mit dem Drücken der Tab Taste. Gibt es einen Hinweis darauf, wo sich der Cursor derzeit auf der Seite befindet? Wenn Sie sich in Chrome oder Safari befinden, ist die Standardanzeige ein blauer Umriss, während Firefox und Internet Explorer/Edge einen gestrichelten schwarzen Umriss aufweisen.
Für Menschen mit motorischen Behinderungen oder anderen Beeinträchtigungen (vorübergehend oder dauerhaft), die die Verwendung der Maus verhindern, ist die Navigation mit der Tastatur die nächstbeste Option.
Darüber hinaus werden diejenigen, die sich selbst als „Power-User“ bezeichnen, die die Tastatur der Verwendung der Maus vorziehen, z. B. beim Ausfüllen langer Formulare, ebenfalls stark profitieren.
Wenn Sie auf einer Website die Tab verwenden, erscheint der Tastaturcursor und bewegt sich von einem HTML-Element zum nächsten. Mit Shift + Tab bewegt sich der Tastaturcursor rückwärts durch die Seite. Die hervorgehobenen Elemente gelten als "natürlich" fokussierbar. Elemente wie Links, Schaltflächen, Formulareingaben usw. erhalten standardmäßig alle den Tastaturfokus und sollten hervorgehoben werden, wenn sich der Cursor von einem zum nächsten bewegt.
Wenn Sie den Cursor auf der Seite nicht sehen können, liegt ein Problem mit der Barrierefreiheit vor
Manchmal wird während des Entwurfs oder der Entwicklung eines Projekts die Aufforderung gestellt, den Fokusanzeigering zu entfernen. Dies ist normalerweise darauf zurückzuführen, dass der Umriss bei der Mausinteraktion angezeigt wird, was als negatives kosmetisches Ergebnis angesehen werden kann.
Mach das nicht…
*:focus { outline: none; } Ohne eine Fokusanzeige weiß ein sehender Nur-Tastatur-Benutzer nicht, wo er sich auf der Seite befindet, wenn er durch Inhalte navigiert. Dies ist ein erhebliches Zugänglichkeitsproblem, bei dem die Beibehaltung des standardmäßigen Fokusindikators einen großen Einfluss auf die Benutzerfreundlichkeit Ihrer Website hat.
Obwohl dringend empfohlen wird, den Standardindikator nicht zu entfernen, gibt es einige Problemumgehungen, die als Ersatz verwendet werden könnten, die wir bald besprechen werden.
Benutzerdefinierte Fokusanzeige
Mit CSS ist es möglich, einen eigenen Fokusindikator zu erstellen. Mit ein bisschen Code wie …
*:focus { outline: solid 3px red; }
…können Sie einen benutzerdefinierten Fokusindikator erstellen. Dadurch wird ein durchgehender roter Umriss um fokussierbare Elemente gelegt.
Bei der Implementierung einer benutzerdefinierten Gliederung sind einige Dinge zu beachten:
- Stellen Sie sicher, dass das Kontrastverhältnis des Indikators zum Hintergrund hoch ist. Wenn Menschen die Fokusanzeige nicht sehen können, geht ihr Zweck verloren.
- Machen Sie es konsistent. Da ein benutzerdefinierter Fokusindikator beim ersten Besuch unerwartet ist, ist es eine gute Idee, die Dinge während der gesamten Benutzererfahrung der Website konsistent und vorhersehbar zu halten.
Tastatur-/Mausnutzung erkennen
In letzter Zeit wurde viel großartige Arbeit geleistet, um zu erkennen, wenn jemand eine Maus oder eine Tastatur verwendet, um durch den Inhalt der Website zu navigieren. Auf diese Weise können Designer eine benutzerdefinierte, gut sichtbare Fokusanzeige nur für Tastaturbenutzer erstellen. Mausbenutzer könnten sich nur auf den Mauszeiger als ihren Indikator verlassen.
Diese Technik ist noch nicht direkt in Browser integriert. Es sind jedoch Codeausschnitte von Drittanbietern (auch als "Polyfill" bezeichnet) verfügbar, um diese Funktionalität zu erhalten.
Zwei davon sind einen Besuch wert:
WCAG-Erfolgskriterien
Dies kommt auf WCAG 2.4.7 Focus Visible zurück, in dem es heißt:
"Jede tastaturbedienbare Benutzerschnittstelle hat einen Betriebsmodus, in dem die Tastaturfokusanzeige sichtbar ist."
Fokusreihenfolge
Wenn Sie mit CSS Flexbox oder Grid vertraut sind, wissen Sie vielleicht, dass es einfach ist, die Reihenfolge von Inhalten mit nur wenigen CSS-Eigenschaften zu manipulieren. Wenn Sie beispielsweise einen Container der rechten Leiste auf die linke Seite des Bildschirms verschieben müssen, können Sie dies erreichen, indem Sie eine CSS-Zeile hinzufügen.
Das Problem hier ist, dass die Fokusanzeige unerwartet auf dem Bildschirm herumspringen kann, wenn jemand die Tastatur, den Bildschirmleser oder eine andere Eingabe verwendet, die keine Maus ist. Beim Verschieben des rechten Bar-Containers nach links per CSS bleibt das zur Generierung des Seiteninhalts verwendete HTML an der gleichen Position. Infolgedessen verschiebt sich die Reihenfolge des Tastaturfokus von der oberen Kopfleiste zum Hauptinhaltscontainer auf der rechten Seite, dann zurück nach oben links auf der Seite und schließlich zum Inhalt der Fußzeile.
Stellen Sie sicher, dass die visuelle Reihenfolge des Inhalts mit der HTML-Reihenfolge übereinstimmt
Dies ist ein Problem, wenn es um Menschen mit Sehbehinderung geht, die auf Zoom- Software angewiesen sind, oder um jemanden mit einer kognitiven Beeinträchtigung , der durch die unerwartete Bewegung von einem Teil des Bildschirms zum anderen verwirrt werden kann. Allein aus diesem Grund wird empfohlen sicherzustellen, dass die visuelle Reihenfolge der Inhalte mit der HTML-Reihenfolge übereinstimmt, die der Browser beim Laden der Seite interpretiert. Als Ergebnis schaffen Sie eine viel komfortablere und vorhersehbarere Benutzererfahrung.
WCAG-Erfolgskriterien
Dies kommt auf WCAG 2.4.3: Focus Order zurück, wo es heißt:
"Wenn eine Webseite sequentiell navigiert werden kann und die Navigationssequenzen die Bedeutung oder Bedienung beeinflussen, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, die Bedeutung und Bedienbarkeit bewahrt."
Fokusmanagement
Die Fokusverwaltung ist eine Methode, mit der der Tastaturcursor im Namen des Benutzers willentlich und gezielt von einem Element zum anderen bewegt wird. Diese Technik sollte nur verwendet werden, wenn es absolut notwendig ist, um dem Benutzer keine zusätzliche Arbeit zu bereiten, wenn eine unerwartete Fokusverschiebung aufgetreten ist.
Ein Beispiel für die Fokusverwaltung, die wir kostenlos vom Browser erhalten, ist, wenn wir die Tab in einem Formularfeld aktivieren, wird der Fokus automatisch an das nächste Feld im Satz gesendet. Oder wenn Sie von Link zu Link wechseln, bewegt sich der Fokus vom oberen Rand des Dokuments zum unteren Rand. Bei der Verwendung nativer Elemente übernimmt der Browser das Verschieben und Verwalten der Fokusposition für uns.
Wenn es jedoch darum geht, ein nicht natives Steuerelement oder Widget zu erstellen, z. B. ein modales Fenster, auf das wir später näher eingehen werden, müssen wir die Fokusposition im Namen des Benutzers verwalten.
Wie wir dies erreichen, verwenden wir das tabindex Attribut.
Das tabindex Attribut
Das tabindex Attribut kann auf jedes HTML-Element angewendet werden, um den Fokus zu verwalten, sollte aber in seiner Verwendung auf wenige Anwendungsfälle beschränkt werden.
Schauen wir uns die Werte an, die wir diesem Attribut zuweisen können, und das Ergebnis von jedem.
tabindex="-1"
Der Wert tabindex="-1" ermöglicht es einem nicht fokussierbaren Element, den Fokus programmgesteuert über JavaScript zu erhalten, fügt das Element jedoch nicht der natürlichen Fokusreihenfolge hinzu. Das bedeutet, wenn jemand mit der Tab navigiert, erhält jedes Element mit einem tabindex Wert von -1 keinen Fokus.
Verwenden Sie beispielsweise beim Öffnen eines modalen Fensters JavaScript, um das tabindex="-1" auf den Container des modalen Fensters anzuwenden, und rufen Sie dann die Methode focus() des Containers auf, um den Tastaturfokus anzuwenden. Dadurch kann der Benutzer von diesem Punkt aus mit der Tabulatortaste vorwärts gehen und den Inhalt des modalen Fensters wie erwartet entdecken.
tabindex="0"
Der Wert tabindex="0" ermöglicht es einem nicht fokussierbaren Element, den Fokus zu erhalten, und fügt das Element in die natürliche Fokusreihenfolge ein. Wenn diese Einstellung auf ein nicht fokussierbares Element gesetzt ist und jemand mit der Tab navigiert, erhält dieses Element mit seinem tabindex Attribut, das auf den Wert 0 gesetzt ist, den Fokus.
Wenn beispielsweise ein Click-Ereignishandler an etwas wie ein div -Element angehängt werden musste, würde die Anwendung von tabindex="0" dem div ermöglichen, den Tastaturfokus zu erhalten, wenn durch den Seiteninhalt navigiert wird.
tabindex="1" oder höher
Jeder tabindex Wert größer als 0 gilt als Anti-Pattern und sollte vermieden werden. Wenn beispielsweise ein Element tabindex="5" , würde dies den Fokus beim Navigieren durch den Seiteninhalt zuerst auf dieses Element lenken, und beim Wegnavigieren würde der Fokus zum ersten Element in der natürlichen Tab-Reihenfolge zurückkehren.
Wie zuvor besprochen, handhabt der Browser automatisch die Fokusverwaltung zwischen nativ fokussierbaren Elementen. Verlassen wir uns in diesem Sinne darauf, dass der Browser den Fokus organisch handhabt, wie es durch die Reihenfolge der Elemente im Dokument bestimmt wird.
Verzichten Sie darauf, überall
tabindex="0"hinzuzufügen !
Wenn es um die Navigation durch nicht fokussierbare Elemente geht, wie z. B. reine Textinhalte, Überschriften oder Bilder, ist es wichtig zu beachten, dass unterstützende Technologien wie Bildschirmlesegeräte (die später ausführlicher besprochen werden) über integrierte Funktionen verfügen Lesen und konsumieren Sie diese Arten von Inhalten.
Nachdem Sie gelernt haben, wie Sie sich mit der Tab auf einer Webseite bewegen, und das tabindex Attribut, könnten Sie versucht sein, tabindex="0" auf alles zu setzen, um sicherzustellen, dass ein Screenreader-Benutzer in der Lage ist, mit der Tab zu diesen Elementen zu gelangen. Bitte unterlassen Sie dies. Dies wird als Anti-Pattern angesehen, da es für reine Tastaturbenutzer mehr Arbeit bedeutet, sich zu bewegen und die Inhalte zu konsumieren, an denen sie interessiert sind.
Mit einigen Ausnahmen erhalten nur Elemente das tabindex="0" -Attribut, auf die eine Aktion angewendet wird, z. B. ein JavaScript-Klick-Ereignishandler. Lassen Sie alle anderen Elemente aus der natürlichen Tab-Reihenfolge heraus, da Benutzer, die nur die Tastatur verwenden, sonst viele Male die Tab -Taste drücken müssten, nur um Links am Ende der Seite zu erreichen, was zu einer frustrierenden Benutzererfahrung führen würde.
Eine kurze Anmerkung zum autofocus Attribut
Ähnlich wie bei der Verwendung des Attributs tabindex mit einem Wert größer als 1 verhält sich das Attribut autofocus auf ähnliche Weise, außer dass jedes Element, das dieses Attribut aufweist, beim Laden automatisch den Fokus erhält.
Das autofocus -Attribut ist so, als würde man nach etwa 15 Minuten in einen Film eintauchen; Sie können irgendwie herausfinden, was los ist, aber Sie wünschen sich wirklich, Sie wären gerade rechtzeitig gekommen, um den Film von Anfang an zu sehen. Jetzt sind Sie verwirrt über das, was passiert, hungrig, weil Sie kein Popcorn bekommen können, und fühlen sich ein wenig genervt. So ist das Erleben des autofocus für Screenreader-Benutzer (außer vielleicht dem hungrigen Teil, aber hey, man weiß ja nie.)
Aus diesem Grund gilt der autofocus als Antimuster und sollte vermieden werden.