5 Schritte zum Entwerfen von Apps mit Blick auf die Barrierefreiheit der Tastatur

Wenn wir an den „durchschnittlichen“ Benutzer denken, neigen wir dazu, uns vorzustellen, dass er eine Maus oder ein Trackpad verwendet, wenn er an seinem Computer sitzt. Aber was wäre, wenn ihre bevorzugte oder einzige Option die Verwendung einer Tastatur wäre? Haben Sie darüber nachgedacht, Ihre Apps unter Berücksichtigung der Tastaturzugänglichkeit zu entwerfen?

Es gibt viele Gründe, warum jemand eine Maus oder ein Trackpad nicht bedienen möchte oder kann, um seinen Computer zu verwenden. Sie können dauerhafte, chronische oder vorübergehende Zustände haben, die ihre Geschicklichkeit oder Muskelkontrolle einschränken, zu Empfindlichkeit in ihren Handgelenken oder Händen führen oder es schwierig machen, dem Mauszeiger auf einem Bildschirm zu folgen. Sie könnten auch „Power-User“ sein, die nach weiteren Abkürzungen suchen, um ihre Arbeitsabläufe zu optimieren. In jedem dieser Fälle könnten Tastaturen das bevorzugte oder notwendige Mittel einer Person sein, um mit Technologie zu interagieren.

In diesem Artikel erfahren Sie mehr über die Richtlinien für den Tastaturzugriff sowie über fünf Schritte, die Sie beim Entwerfen von Apps beachten sollten, um sicherzustellen, dass sie über die Tastatur zugänglich sind.

Wie funktioniert die Barrierefreiheit der Tastatur?

Wenn eine App tastaturzugänglich ist, bedeutet dies, dass Benutzer die Möglichkeit haben, nur eine Tastatur zu verwenden, um Steuerelemente zu bedienen. Steuerelemente sind alle interaktiven Komponenten auf der Seite, wie Schaltflächen, Links, Formulareingaben, Videos und andere interaktive Inhalte.

Grundlagen der Tastaturnavigation

Hier sind einige grundlegende Tasten, die für die Tastaturnavigation verwendet werden:

• Navigieren zum nächsten Steuerelement: Tab (oder die rechte oder die Pfeiltaste nach unten für zugehörige Optionsfelder und Auswahloptionen)
• Navigieren zum vorherigen Steuerelement: Umschalt + Tab (oder die linke oder obere Pfeiltaste für zugehörige Optionsfelder und Auswahloptionen)
• Anklicken eines Bedienelements: Enter und/oder Leertaste
• Zwischen verwandten Optionsfeldern navigieren oder Optionen auswählen: Pfeiltasten

Fokusreihenfolge

Die Reihenfolge, in der Steuerelemente auf Tastaturereignisse reagieren können, wird als Fokusreihenfolge bezeichnet. Wenn ein Element fokussiert ist, können Sie mit bestimmten Tastatursteuerungen damit interagieren. Wenn ein Element den Fokus verliert, wird es unscharf. Browser rendern standardmäßige Fokuszustände, um Benutzern zu helfen, den Überblick darüber zu behalten, welches Element gerade im Fokus ist.

Das könnte Ihnen auch gefallen: Universelles Design: 11 praktische Tipps, um Ihre Websites und Apps barrierefreier zu machen.

Tastaturzugänglichkeit und die Richtlinien für barrierefreie Webinhalte (WCAG)

Die Richtlinien für barrierefreie Webinhalte (WCAG) beschreiben drei Konformitätsstufen – Stufe A, Stufe AA und Stufe AAA – die als Standards für regionale oder nationale Gesetze zur Barrierefreiheit im Internet auf der ganzen Welt übernommen wurden.

Die Zugänglichkeit der Tastatur ist eines der Erfolgskriterien für die Einhaltung von Level A. Die Kriterien der Stufe A beschreiben Must-Have-Features für alle Webinhalte. Sie gelten auch als am einfachsten zu implementieren.

„Die Zugänglichkeit der Tastatur kann auch leicht falsch sein, wenn wir nicht aufpassen.“

Allerdings kann die Zugänglichkeit der Tastatur auch leicht falsch sein, wenn wir nicht aufpassen. Hier sind Beispiele für häufige Probleme mit der Barrierefreiheit der Tastatur, die im Internet zu finden sind:

• Unmerkliche Fokuszustände
• Falsche Fokusreihenfolge
• Interaktive Elemente, die keinen Fokus erhalten können
• Komplexe Komponenten, die keine Tastaturinteraktionen erfassen

Glücklicherweise gibt es viele Techniken, die wir verwenden können, um Tastaturbenutzer im Auge zu behalten und diese Fehler in unseren eigenen Apps zu vermeiden.

5 Schritte zum Erstellen von tastaturzugänglichen Apps

1. Gestalten Sie intuitive Interaktionen

Wenn wir einfache Steuerelemente ohne benutzerdefiniertes Verhalten rendern, können wir normalerweise ihre integrierten Funktionen für die Barrierefreiheit der Tastatur nutzen. Wenn wir jedoch das standardmäßige Tastaturverhalten im Zusammenhang mit Schaltflächen, Links oder Eingaben nicht kennen, können wir versehentlich verwirrende Erlebnisse für Tastaturbenutzer schaffen.

„Wenn wir das standardmäßige Tastaturverhalten im Zusammenhang mit Schaltflächen, Links oder Eingaben nicht kennen, können wir versehentlich verwirrende Erlebnisse für Tastaturbenutzer schaffen.“

Beispielsweise verwenden Entwickler manchmal CSS, um native HTML-Optionsschaltflächen zugunsten stilisierterer visueller Elemente auszublenden. Es ist nicht offensichtlich, dass die Eingaben hinter den Kulissen Optionsfelder sind, sodass Tastaturbenutzer möglicherweise nicht erkennen, dass sie die Pfeiltasten und nicht die Tabulatortaste verwenden sollten, um den Fokus zwischen den zugehörigen Optionen zu verschieben.

Um dieses Problem zu vermeiden, sollten wir etwas anzeigen, das dem nativen HTML-Element zumindest ähnelt, um visuelle Hinweise für alle bereitzustellen, die mit einer Tastatur damit interagieren möchten oder müssen.

2. Erstellen Sie Ihre App so, dass eine Tastatur alles kann, was eine Maus kann

Achten Sie auf Elemente, die nicht über integrierte Tastatureingabehilfen verfügen. Layoutelemente, Listen, Tabellen, Überschriften, Absätze und nicht-semantische HTML-Tags unterstützen standardmäßig keine Tastenkombinationen. Und doch werden sie häufig verwendet, um komplexere Komponenten wie Registerkarten, Drag-and-Drop-Listen oder Modale zu erstellen.

JavaScript ermöglicht es uns, Ereignis-Listener hinzuzufügen, die Nicht-Steuerelemente dazu bringen, auf Mausklicks oder Gesten zu reagieren. In React können wir beispielsweise die onClick Prop verwenden, um einem Listenelement Interaktivität hinzuzufügen.

Immer wenn wir Nicht-Steuerelementen Interaktivität hinzufügen, müssen wir ihr tabIndex Attribut auf 0 setzen. Dadurch erhält das Element den Fokus in der richtigen Fokusreihenfolge, wenn die Tabulatortaste gedrückt wird. Wir müssen auch Keypress- oder Keydown-Event-Handler implementieren, um „Klicks“ über die Eingabetaste und/oder die Leertaste zu registrieren (Links können mit beiden angeklickt werden, während Schaltflächen nur die Eingabetaste unterstützen).

Wir können einen Teil dieser zusätzlichen Arbeit vermeiden, indem wir stattdessen Steuerelemente wie Anker-Tags oder Schaltflächenelemente verwenden. Wir können jederzeit CSS verwenden, um standardmäßige Link- und Schaltflächenstile zu überschreiben und das interaktive Element die gesamte Breite seines nicht interaktiven übergeordneten Elements überspannen zu lassen, um den Zielbereich zu maximieren.

Unabhängig davon, ob wir Steuerelemente für nicht-native Funktionen verwenden oder nicht, müssen wir möglicherweise noch Ereignis-Listener für die Pfeiltasten (um zwischen Registerkarten in einer Registerkartenkomponente zu navigieren) oder die Escape-Taste (um ein Overlay zu schließen) hinzufügen, um unsere Komponente 100 zu machen Prozent Tastatur zugänglich.

Wenn wir nicht standardmäßige Tastaturverhalten für eine komplexere Komponente implementieren, ist es hilfreich, sichtbare Anweisungen bereitzustellen, die die Tastatursteuerelemente beschreiben, die Benutzer verwenden können, um mit der Komponente zu interagieren.

3. Führen Sie die zusätzliche Arbeit durch, wenn Sie die standardmäßige Fokusreihenfolge überschreiben

Die Fokusreihenfolge ist eine weitere WCAG-Anforderung, die eng mit der Tastaturzugänglichkeit zusammenhängt. Um die Kriterien der Ebene A zu erfüllen, sollte die Fokusreihenfolge mit der visuellen Abfolge interaktiver Elemente auf der Seite übereinstimmen. Tastaturbenutzer sollten in der Lage sein, von oben nach unten und in der gleichen horizontalen Richtung wie Ihr Textinhalt (von links nach rechts oder von rechts nach links) durch die Steuerelemente auf dem Bildschirm zu navigieren.

Die einfachste Möglichkeit, dieses Kriterium zu erfüllen, besteht darin, die standardmäßige Fokusreihenfolge, die durch die Reihenfolge bestimmt wird, in der Elemente im Markup angeordnet sind, unverändert zu lassen. Wir laufen Gefahr, dieses Kriterium nicht zu erfüllen, wenn wir Diskrepanzen zwischen der visuellen Anordnung von Steuerelementen und der Art und Weise, wie sie im Quellcode angeordnet sind, einführen.

Das könnte Ihnen auch gefallen: Erstellen einer barrierefreien Breadcrumb-Navigation mit Liquid und Shopify.

Wenn wir den obigen Screenshot als Beispiel verwenden, sagen wir, wir wollten, dass die Karte „Tags aktualisieren“ die Position mit der Karte „Beschreibung aktualisieren“ tauscht, wenn sie für schmalere Ansichtsfenster gestapelt werden. Wenn die Karten als Flex-Elemente gerendert werden, könnten wir in Betracht ziehen, die CSS-Eigenschaft order zu verwenden, um ihre Reihenfolge an einem bestimmten Haltepunkt zu ändern.

Während die Eigenschaft „ order “ die visuelle Reihenfolge von Flex-Elementen beeinflusst, aktualisiert sie nicht deren Anordnung im Quellcode. Wenn ein Benutzer die Tabulatortaste drückt, um zwischen den einzelnen Schaltflächen zu navigieren, erhält die Schaltfläche „Tags aktualisieren“ daher immer noch den Fokus vor „Beschreibung aktualisieren“, obwohl sie auf dem Bildschirm in umgekehrter Reihenfolge angezeigt werden. Dies führt dazu, dass sich der Fokus unerwartet auf der Seite nach oben und unten verschiebt, was eine verwirrende Erfahrung für den Benutzer schafft.

Eine Möglichkeit, dieses Problem zu vermeiden, besteht darin, zwei Versionen der Karten im Markup zu rendern: eine in der Reihenfolge, die für breitere Ansichtsfensterbreiten erwartet wird, und eine andere in der gewünschten Reihenfolge für schmalere Ansichtsfensterbreiten. Wir können die display verwenden, um an bestimmten Haltepunkten zwischen ihnen umzuschalten.

Wenn wir nicht zwei Versionen im Markup beibehalten möchten, müssen wir JavaScript verwenden, um die tabIndex Attribute der Karten zu aktualisieren, während sie auf der Seite gestapelt werden. Abhängig von der Anzahl der Steuerelemente, die wir rendern, kann es schwieriger sein, diesen Ansatz richtig hinzubekommen, als verschiedene Versionen der Karten im Markup beizubehalten.

4. Gestalten Sie beim Anpassen von Fokuszuständen für Benutzer, die sie am dringendsten benötigen

Browser verwenden die CSS-Eigenschaft outline , um eine Art visuellen Hinweis darauf zu geben, dass ein Element im Fokus ist. Fokuszustände sollen Benutzern helfen zu erkennen, welches Element Tastaturereignisse registriert, wenn sie mit einer Tastatur auf der Seite navigieren.

Es ist sehr üblich, dass Designer und Entwickler Standard-Fokuszustände ersetzen, die von Browsern gerendert werden. Dazu kann es erforderlich sein, die Standardkontur zu outline oder vollständig zu entfernen und durch eine andere CSS-Eigenschaft wie background , border , box-shadow , color oder transform zu ersetzen.

Das könnte Ihnen auch gefallen: Erstellen einer barrierefreien Paginierung mit Liquid.

Wie auch immer wir uns entscheiden, benutzerdefinierte Fokuszustände in unseren Apps zu rendern, wir sollten sicherstellen, dass sie die folgenden Barrierefreiheitsanforderungen erfüllen:

• Ausreichender Farbkontrast: Es sollte genügend Kontrast zwischen unserem Fokuszustand und den Farben um ihn herum bestehen, damit Benutzer mit Sehbehinderung leicht verfolgen können, welches Element gerade im Fokus ist.
• Farbänderungen werden mit anderen visuellen Indikatoren kombiniert: Das Ändern der Farbe des Rahmens, der Schriftart oder des Hintergrunds eines Elements ist für Benutzer mit Farbenblindheit möglicherweise nicht wahrnehmbar. Es sollte mit anderen visuellen Änderungen kombiniert werden, bei denen die Benutzer nicht in der Lage sein müssen, Farben zu unterscheiden. Dies gilt auch für Schwebe- und Fehlerzustände, die Farbänderungen beinhalten.
• Sichtbar in Designs mit hohem Kontrast: Einige CSS- Eigenschaften, einschließlich background und box-shadow , werden ignoriert, wenn der Modus mit hohem Kontrast auf Windows-Geräten aktiviert ist. Auch Farbveränderungen werden möglicherweise nicht registriert, weshalb es doppelt wichtig ist, auf zusätzliche Indikatoren zu setzen, die für Menschen wahrnehmbar sind, die mehr Kontrast zwischen Hintergrund- und Vordergrundfarbe benötigen.

Es ist zwar akzeptabel, die standardmäßige outline zu überschreiben, aber entfernen Sie niemals standardmäßige Fokusstatus, ohne einen Ersatz bereitzustellen.

5. Bereitstellung von Tastenkürzeln für Tastaturbenutzer

Wenn jemand mit einer Maus auf einer Webseite navigiert, kann er beim Laden der Seite über irrelevante Header-Inhalte hinwegscrollen, um die gesuchten Informationen zu erreichen. Der Prozess ist für Tastaturbenutzer nicht so optimiert, die möglicherweise durch mehrere Navigationslinks oder andere Steuerelemente navigieren müssen, die vor dem Hauptinhalt der Seite stehen.

Als Entwickler können wir oben auf jeder Seite in unserer App einen „Skip-Link“ bereitstellen, damit Tastaturbenutzer Steuerelemente umgehen können, die dem Hauptinhalt der Seite vorangehen. Der Skip-Link wird normalerweise so lange ausgeblendet, bis er den Fokus erhält. Es ist für Personen, die eine Maus verwenden, um mit Ihrer App zu interagieren, nicht sichtbar, aber es wird das erste Element sein, das den Fokus für diejenigen erhält, die eine Tastatur verwenden.

Wenn auf den Link geklickt wird, verschiebt sich der Fokus auf den primären Inhaltscontainer, und Tastaturbenutzer können sofort damit beginnen, durch die wichtigsten Steuerelemente auf einer Seite zu navigieren.

Skip-Links sind mehr als bequeme Verknüpfungen. Sie sind ein Beispiel für Bypass-Blöcke, die erforderlich sind, um die WCAG-Standards der Stufe A zu erfüllen.

Testen Sie Ihre App häufig, indem Sie selbst Tastaturbenutzer werden

Das Testen der Tastaturzugänglichkeit hat eine relativ niedrigere Lernkurve für Personen, die nicht an die Verwendung von Hilfstechnologien oder -geräten gewöhnt sind. Sie benötigen lediglich Zugriff auf eine Tastatur, Vertrautheit mit Standardtastaturverhalten und Zugriff auf den Windows-Modus mit hohem Kontrast (entweder durch Erwerb eines Windows-Geräts oder Installation einer virtuellen Maschine).

Hier sind einige Fragen, die Sie im Hinterkopf behalten sollten, wenn wir unsere App auf Tastaturzugänglichkeit testen:

• Kann ich meine Tastatur verwenden, um mit allem zu interagieren, das auf Mausklicks und Gesten reagiert?
• Wird jemand wissen, wie man mit diesem Element interagiert, wenn es fokussiert wird?
• Stimmt die Fokusreihenfolge mit der visuellen Reihenfolge der interaktiven Elemente auf der Seite überein?
• Kann ich verfolgen, welches Element gerade fokussiert ist, auch wenn ich einen höheren Kontrast zwischen den Farben benötige?
• Kann ich einfach zum Hauptinhalt der Seite gelangen?

All diese Fragen mit „Ja“ zu beantworten, muss nicht viel Aufwand bedeuten und kann für Anwender in allen Lebenslagen positive Auswirkungen haben: ob mit körperlicher Beeinträchtigung, Zeitersparnis oder Nutzungsbedarf ihren Computer mit einer Hand.

Barrierefreiheitstests sind ein wesentlicher Bestandteil der App-Entwicklung. Insbesondere die Zugänglichkeit der Tastatur ist genauso wichtig wie das Bereitstellen von Alternativtext für Personen, die Bildschirmleseprogramme verwenden, oder von Untertiteln für Personen, die Audioinhalte nicht hören können. Letztendlich sollte die Fähigkeit zur Verwendung einer Maus nicht erforderlich sein, um eine App zu verwenden, wenn Sie möchten, dass Ihre App vollständig zugänglich ist.