UX-Optimierungen für Nur-Tastatur- und Hilfstechnologiebenutzer

(Dies ist ein gesponserter Artikel.) Eines der coolen Dinge an der Barrierefreiheit ist, dass Sie gezwungen sind, Ihre Anwendung über die typische sehende, mausbasierte Benutzererfahrung hinaus zu sehen und darüber nachzudenken. Benutzer, die nur über die Tastatur (KO) und/oder Hilfstechnologie (AT) navigieren, sind nicht nur stark davon abhängig, dass die Informationsarchitektur Ihrer Anwendung durchdacht ist, sondern auch von den Möglichkeiten, die Ihre Anwendung bietet, um die Erfahrung für alle Arten von Benutzern so einfach wie möglich zu halten.

In diesem Artikel gehen wir auf einige dieser Angebote ein, die Ihre KO/AT-Benutzererfahrung verbessern können, ohne die Erfahrung für andere wirklich zu ändern.

Ergänzungen zur UX Ihrer Anwendung

Dies sind Funktionen, die Sie Ihrer Anwendung hinzufügen können, um die UX für KO/AT-Benutzer zu verbessern.

Links überspringen

Ein Skip-Link ist eine Navigationsfunktion, die sich unsichtbar oben auf Websites oder Anwendungen befindet. Wenn es vorhanden ist, wird es aufgerufen und auf dem ersten Tabstopp Ihrer Anwendung sichtbar.

Ein Skip-Link ermöglicht es Ihrem Benutzer, zu verschiedenen interessanten Abschnitten innerhalb der Anwendung zu „springen“, ohne mit der Tabulatortaste dorthin wechseln zu müssen. Der Skip-Link kann mehrere Links zu ihm haben, wenn Ihre Anwendung mehrere Interessengebiete hat und Sie der Meinung sind, dass Ihre Benutzer schnellen Zugriff auf den Einstiegspunkt Ihrer Anwendung haben sollten.

Für KO/AT-Benutzer ist dies ein hilfreiches Tool, das es ihnen ermöglicht, Ihre App schnell zu durchlaufen, und ihnen dabei helfen kann, sich an der Informationsarchitektur Ihrer Anwendung zu orientieren. Alle anderen Benutzer werden wahrscheinlich nicht einmal wissen, dass diese Funktion existiert.

Hier ist ein Beispiel dafür, wie wir mit Skip-Links umgehen. Nachdem Sie auf den Link geklickt haben, drücken Sie Tab ⇥ und sehen Sie in der oberen linken Ecke nach. Der Skip-Link hat zwei Links: Hauptinhalt und Codebeispiele . Sie können Tab ⇥ verwenden, um zwischen ihnen zu wechseln, drücken Sie die Eingabetaste , um zum Link zu navigieren.

Shortcuts/Hotkey-Menüs

Dies ist eine Funktion, die meiner Meinung nach jeder kennt: Verknüpfungen und Hotkeys. Sie haben sie wahrscheinlich von Zeit zu Zeit verwendet, sie sind bei Power-Usern einer Anwendung sehr beliebt und kommen in einer Vielzahl von Inkarnationen vor.

Für KO/AT-Benutzer sind Shortcuts/Hotkeys von unschätzbarem Wert. Sie ermöglichen es ihnen, die Anwendungen wie beabsichtigt zu verwenden, ohne visuell auf etwas zielen oder durch die Anwendung navigieren zu müssen, um zu einem Element oder Inhalt zu gelangen. Während häufige Aktionen und Inhalte immer geschätzt werden, wenn sie in einem Shortcut-/Hotkey-Menü dargestellt werden, möchten Sie vielleicht auch einige etwas weniger häufige Aktionen in Betracht ziehen, die (aus gutem Grund) in Ihrer Benutzeroberfläche vergraben sein können, aber dennoch etwas sind, das ein Benutzer gerne tun würde zugreifen können.

Das Erstellen von Verknüpfungen für diese Funktionen ist für KO/AT-Benutzer äußerst hilfreich. Sie können den Befehl etwas komplizierter gestalten, indem Sie ihn beispielsweise mit (3) Tastenanschlägen aufrufen, um zu implizieren, dass es sich um eine weniger häufig verwendete Funktion handelt. Wenn Sie ein Shortcut-/Hotkey-Menü haben, stellen Sie sicher, dass Sie einen Weg finden, es in Ihren Anwendungen zu bewerben, damit Ihre Benutzer, insbesondere Ihre KO/AT-Benutzer, es finden und effektiv nutzen können.

Benutzerschulung

Benutzerschulung bezieht sich auf eine Funktion, die die Benutzer anweist, was zu tun ist, wohin sie gehen oder was sie erwarten können. Tooltips, Point-Outs, Info-Bubbles etc. sind Beispiele für Benutzerschulungen.

Eine Sache, die Sie sich beim Entwerfen, Platzieren und/oder Schreiben von Kopien für Ihre Benutzerschulung stellen sollten, ist:

„Wenn ich das nicht sehen könnte, wäre es dann immer noch wertvoll, ______ zu verstehen?“

Oft ist es nur die Neuausrichtung der Benutzerschulung durch diese Linse, die zu einer viel besseren Erfahrung für alle führen kann. Anstatt zum Beispiel zu sagen „Klicken Sie als Nächstes auf die Schaltfläche unten“, können Sie schreiben: „Um zu beginnen, klicken Sie auf die Schaltfläche START.“ Die zweite Methode entfernt die visuelle Orientierung und konzentriert sich stattdessen auf die gemeinsamen Informationen, die sowohl einem sehenden als auch einem KO/AT-Benutzer zur Verfügung stehen würden.

Hinweis : Ich sollte erwähnen, dass es völlig in Ordnung ist, Benutzerschulungsfunktionen wie Hinweise zu verwenden, um Dinge in der Anwendung visuell hervorzuheben. Stellen Sie einfach sicher, dass der begleitende Text Ihre KO/AT-Benutzer die gleichen Dinge verstehen lässt, auf die visuell verwiesen wird.

Erweiterungen der UX Ihrer Anwendung

Es gibt Änderungen oder Optimierungen, die Sie an gemeinsamen Komponenten/Funktionen vornehmen können, um die UX für KO/AT-Benutzer zu verbessern.

Modale Fokussierung

Jetzt kommen wir ins Eingemachte. Eines der großartigen Dinge an Barrierefreiheit ist, wie sie die Tür zu neuen Wegen öffnet, um Probleme zu lösen, die Sie vielleicht vorher nicht in Betracht gezogen haben. Sie können etwas vollständig WCAG 2.0 AA zugänglich machen und das Problem mit sehr unterschiedlichen Ansätzen lösen. Für Modale haben wir bei Deque einen interessanten Ansatz entwickelt, der für die meisten sehenden Benutzer völlig unsichtbar wäre, aber von KO/AT-Benutzern fast sofort bemerkt würde.

Damit ein Modal zugänglich ist, muss es sich selbst ankündigen, wenn es aufgerufen wird. Zwei übliche Möglichkeiten, dies zu tun, sind: den Körper des Modals fokussieren, nachdem das Modal geöffnet ist, oder den Header des Modals fokussieren (falls vorhanden), nachdem das Modal geöffnet ist. Sie tun dies, damit das AT des Benutzers die Absicht des Modals wie „Profil bearbeiten“ oder „Neues Abonnement erstellen“ auslesen kann.

Nachdem Sie den Körper oder die Kopfzeile fokussiert haben, wird durch Drücken von Tab ⇥ der Fokus auf das nächste fokussierbare Element im Modal gelenkt – normalerweise ein Feld oder, wenn es sich in der Kopfzeile befindet, manchmal die Schaltfläche „Schließen“ (X). Wenn Sie mit der Registerkarte fortfahren, werden Sie durch alle fokussierbaren Elemente im Modal geführt, die normalerweise mit Terminalschaltflächen wie SPEICHERN und/oder ABBRECHEN abgeschlossen werden.

Jetzt kommen wir zum interessanten Teil. Nachdem Sie das letzte Element im Modal fokussiert haben, werden Sie durch erneutes Drücken von Tab ⇥ zum ersten Tabstopp „zyklieren“, der im Fall des Modals entweder der Hauptteil oder die Kopfzeile ist, da wir dort begonnen haben. In unseren Modals „überspringen“ wir jedoch diesen anfänglichen Tabstopp und bringen Sie zum zweiten Stopp (der in unseren Modals das Schließen (X) in der oberen Ecke ist. Wir tun dies, weil das Modal sich nicht ständig selbst ankündigen muss immer und immer wieder in jedem Zyklus. Es muss dies nur bei der anfänglichen Evokation tun, nicht bei späteren Durchgängen, also haben wir einen speziellen programmatischen Stopp, der sich nach dem ersten Mal selbst überspringt.

Dies ist eine kleine (aber geschätzte) Verbesserung der Benutzerfreundlichkeit, die wir exklusiv für KO/AT-Benutzer entwickelt haben und die allen anderen völlig unbekannt wäre.

Navigationsmenüs Traversing und Focus/Selected Management

Navigationsmenüs sind knifflig. Sie können auf vielfältige Weise strukturiert, abgestuft, verschachtelt sein und über unzählige Mechanismen der Evokation, Offenlegung und Durchquerung verfügen. Daher ist es wichtig zu überlegen, wie sie während der Designphase mit KO/AT-Benutzern interagiert und dargestellt werden. Gute Menüs sollten „betreten“ und „verlassen“ werden, was bedeutet, dass Sie mit der Tabulatortaste in ein Menü wechseln, um es zu verwenden, und mit der Tabulatortaste wieder verlassen, um es zu verlassen (wenn Sie es nicht verwenden).

Diese Idee lässt sich am besten mit einem wörtlichen Beispiel veranschaulichen, also werfen wir einen Blick auf unsere zweistufige, vertikale Navigation von Cauldron.

1. Gehen Sie zu https://pattern-library.dequelabs.com/;
2. Drücken Sie dreimal Tab ⇥ . Der erste Tabstopp ist der Skip-Link (den wir zuvor besprochen haben), der zweite ist das Logo, das als „Zurück zur Startseite“-Link fungiert, und der dritte Tab führt zum Menü.
3. Nun, da Sie sich im Menü befinden, verwenden Sie die Pfeiltasten ( → und ↓ ), um Abschnitte des Menüs zu verschieben und zu öffnen;
4. Durch Drücken von Tab ⇥ an einem beliebigen Punkt verlassen Sie das Menü und gelangen zum Inhalt der Seite.

Navigationsmenüs können auch in Verbindung mit einigen der vorherigen Themen wie Shortcut-/Hotkey-Menüs verwendet werden, um die Verwendung des Menüs noch effizienter zu gestalten.

Logische Fokusbeibehaltung (z. B. Löschen einer Zeile, Zurückkehren zu einer Seite)

Fokusretention ist sehr wichtig. Die meisten Menschen sind zumindest konzeptionell mit Fokussierungselementen in ihrer logisch beabsichtigten Reihenfolge auf der Seite vertraut; Es kann jedoch trübe werden, wenn sich ein Element oder Inhalt ändert/erscheint/verschwindet.

• Wohin geht der Fokus, wenn das Feld, auf dem Sie sich befinden, gelöscht wird?
• Was ist, wenn Sie zu einer anderen Registerkarte weitergeleitet werden, auf der die Anwendung einen neuen Kontext hat?
• Was passiert, nachdem ein Modal aufgrund einer Endaktion wie SAVE geschlossen wurde?

Für einen sehenden Benutzer gibt es visuelle Hinweise, die ihn darüber informieren können, was passiert ist.

Hier ist ein Beispiel: Sie haben ein Modal zum Bearbeiten von Rezepten, mit dem Ihr Benutzer Zutaten hinzufügen und entfernen kann. Es gibt ein Zutatenfeld mit einer Schaltfläche „Weitere Zutat hinzufügen“ darunter. (Ja, es ist als Link gestaltet, aber das ist ein Thema für einen anderen Tag.) Ihr Fokus liegt auf der Schaltfläche. Sie klicken auf die Schaltfläche und zwischen der Schaltfläche und dem ersten Feld wird ein neues Feld angezeigt. Wo soll der Fokus liegen? Höchstwahrscheinlich hat Ihr Benutzer eine weitere Zutat hinzugefügt, um sich damit zu beschäftigen, sodass sich der Fokus von der Schaltfläche auf das neu hinzugefügte Feld verlagern sollte.

Die große Erkenntnis aus all dem sind nicht so sehr die konkreten Beispiele, sondern die Mentalität, die sie unterstützt – betrachten Sie die UX für Ihre Anwendung durch die Linse des KO/AT-Benutzers als gutsichtigen, reinen Mausbenutzer. Einige der besten und cleversten Ideen stammen aus den interessantesten und wichtigsten Herausforderungen.

Wenn Sie Hilfe benötigen, um sicherzustellen, dass Ihre Funktionen zugänglich sind, können alle oben genannten Beispiele und unzählige weitere mit der kostenlosen Testanwendung für Web-Zugänglichkeit von Deque getestet werden: ax pro. Es ist kostenlos und Sie können sich hier anmelden.