Oracle JET-App auf Barrierefreiheit mit Tastatur testen

Einführung

Dies ist das zweite Tutorial im Lernpfad Probleme bei der Barrierefreiheit identifizieren.

In Web Content Accessibility Guidelines (WCAG) 2.1 werden viele der Erfolgskriterien für das Erstellen einer zugänglichen Webanwendung beschrieben. In diesem Tutorial werden die Kriterien behandelt, die sich auf die Verwendung nur mit der Tastatur beziehen.

Eine App, die nur per Tastatur zugänglich ist, kann mit alternativen Eingabegeräten für Personen mit eingeschränkter Mobilität oder einer Unfähigkeit verwendet werden, eine Maus zu manipulieren. Wenn Menschen eine Tastatur verwenden können, ist das Internet immer zur Hand.

Ziele

In diesem Tutorial erfahren Sie, wie Sie einen Nur-Tastaturtest einer Webanwendung ausführen.

Voraussetzungen

Aufgabe 1: Testen der Barrierefreiheit nur auf der Tastatur vorbereiten

Die visuelle Prüfung bietet einen Überblick über die Struktur und grundlegende Funktionalität einer zugänglichen Seite. Keyboard-only-Tests stehen im Mittelpunkt der manuellen Barrierefreiheitstests; es gibt dem Entwickler die Möglichkeit, mit der App aus Sicht eines deaktivierten Benutzers zu interagieren. Die Untergruppe der WCAG 2.1-Erfolgskriterien, auf die sich dieses Tutorial konzentriert, umfasst mehrere spezifische Konzepte.

Die zu Beginn dieses Abschnitts genannten Erfolgskriterien beziehen sich indirekt auf das Konzept fokussierbarer Elemente, so dass einige Begriffe definiert werden müssen.

Wenn diese anwendbaren Konzepte definiert und erläutert sind, sind Sie bereit, die Starter-App zu testen.

Beachten Sie den Text "No Exception" in den Klammern des Erfolgskriteriums 2.1.3. Dies bedeutet, dass die Barrierefreiheit der Tastatur obligatorisch ist.

WCAG-Richtlinie 2.1 und das darauf folgende Erfolgskriterium unterstreichen den absoluten Bedarf an Barrierefreiheit. Die Tastatur spielt eine entscheidende Rolle bei der Bereitstellung von Technologie für alle.

Aufgabe 2: Vorhandensein eines visuellen Fokus prüfen

Das Testen der Barrierefreiheit nur mit der Tastatur hängt vom Fokus ab. Die Einhaltung des folgenden Erfolgskriteriums "Fokus sichtbar" ist nicht verhandelbar. Deaktivierte Benutzer können nicht ohne aktiven Fokus in einer App navigieren oder wenn die Fokusplatzierung unklar ist.

Während Sie die Webanwendung durchblättern, sollte immer ein sichtbarer Indikator vorhanden sein, der die Fokusposition identifiziert. Der Indikator ist in der Regel ein Rechteck. Die Deaktivierung des Fokusrechtecks führt zu einem Fehler dieses Kriteriums.

App-Entwickler sind stolz auf die Apps und Programme, die sie schreiben. Ihr Ziel ist es, Funktion in eine visuell ansprechende Erfahrung zu integrieren. Ein Fokus-Rechteck nimmt das Design häufig ab; Entwickler verstecken oder deaktivieren es daher häufig und verletzen das Erfolgskriterium 2.4.7.

Fokusrechteck 1

Fokusrechteck 1

Beschreibung der Abbildung focus_rec1.png

Fokusrechteck 2

Fokusrechteck 2

Beschreibung der Abbildung focus_rec2.png

Suchen Sie den Fokuspunkt in den beiden obigen Screenshots.

Der erste Screenshot Fokusrechteck 1 stellt eine Seite dar, die den Fokus richtig angibt. Der Fokusindikator ist sehr sichtbar, da er die Registerkarte "Überblick" oben links auf der Seite umgibt. Auf dem zweiten Screenshot, Focus Rectangle 2, wurde der Fokus auf der Registerkarte "Überblick" nicht angegeben.

Achten Sie beim Navigieren durch die ersten fokussierbaren Komponenten auf der Einführungsseite auf das Fokusrechteck.

  1. Wenn Ihre App noch nicht ausgeführt wird, navigieren Sie zum Ordner ACCLearningPath, und starten Sie sie.

    $ ojet serve

  2. Wenn die App in Ihrem Browser geöffnet wird, drücken Sie <Ctrl+L>, um den Fokus auf die Adressleiste festzulegen, und drücken Sie dann <Tab>, um den Fokus auf den Link zum Überspringen der Navigation zu verschieben.

  3. Drücken Sie <Tab>, um den Fokus im Benutzermenü oben rechts auf der Seite nach john.hancock@oracle.com zu verschieben.

  4. Drücken Sie <Tab>, um den Fokus auf Einführung im Hauptnavigationsmenü direkt unter dem Benutzermenü zu verschieben.

  5. Drücken Sie <down arrow>, um den Fokus auf Ressourcen im Navigationsmenü zu verschieben, und klicken Sie auf <Enter>, um die Seite "Ressourcen" zu laden.

    Die Seite "Ressourcen"

    Beschreibung der Abbildung resources_page.png

  6. Drücken Sie <Tab>, um den Fokus auf den Link Oracle JET-Hauptsite zu verschieben.

    Beachten Sie, dass kein eindeutiger Hinweis auf den Fokusstandort vorhanden ist. Auf der Seite "Ressourcen" ist das Erfolgskriterium 2.4.7 nicht erfolgreich.

    In den folgenden Schritten beheben Sie das Problem mit dem fehlenden Fokusrechteck, um die WCAG-Standards zu erfüllen.

  7. Navigieren Sie zum Ordner ACCLearningPath/src/js/views, und öffnen Sie die Datei resources.html in einem Codeeditor.

  8. Suchen Sie den Link für die Oracle JET-Hauptsite.

    <li><a style="outline-width:0"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

    Ändern Sie "outline-width:0" im Style-Attribut in "outline-width:3".

    <li><a style="outline-width:3"
   href="https://www.oracle.com/webfolder/technetwork/jet/index.html"
   target="_blank">Oracle JET Main Site</a>
</li>

  9. Speichern und schließen Sie resources.html.

    Die Datei sollte in etwa wie in resources-html.txt aussehen.

  10. Wiederholen Sie die Schritte 2 bis 6 oben, um sicherzustellen, dass das Fokusrechteck jetzt sichtbar ist.

Aufgabe 3: Sinnvolle Registerkartenfolge prüfen

Als Nächstes erfolgt das Nur-Testen der Tastatur, indem die Seite so organisiert wird, wie der Benutzer sie durchblendet.

Die Fokusreihenfolge lässt sich am besten anhand einer Abbildung verstehen. Da die Benutzer die Seite durchblättern, ist die Fokusposition nicht zufällig. Es bewegt sich nicht von einer Seite zur anderen und wieder zurück. Es bewegt sich in einer erwarteten und logischen Weise.

In der vorherigen Aufgabe Vorhandensein eines visuellen Fokus prüfen haben Sie gesehen, wie der Fokus in einer erwarteten Reihenfolge durch das Banner der Seite verschoben wurde. Die Seite "Ressourcen" selbst wurde jedoch codiert, um eine zufälligere Reihenfolge der Registerkarten darzustellen.

  1. Drücken Sie in der ausgeführten App <Ctrl+L>, um den Fokus auf die Adressleiste zu setzen.

  2. Drücken Sie <Tab>, um den Fokus auf den Link "Navigation überspringen" zu verschieben.

  3. Drücken Sie <Tab>, um den Fokus im Benutzermenü oben rechts auf der Seite nach john.hancock@oracle.com zu verschieben.

  4. Drücken Sie <Tab>, um den Fokus auf Einführung im Hauptnavigationsmenü zu verschieben.

  5. Drücken Sie <Tab>, um den Fokus auf den Link Oracle JET-Hauptsite im Hauptteil der Seite zu verschieben.

  6. Klicken Sie auf <Tab>. Der Fokus sollte zum Oracle JET Developer's Guide wechseln, aber stattdessen zum Link Oracle JET Cookbook wechseln.

    Der Link Oracle JET Developer's Guide ist nicht in der Registerkartenfolge enthalten, was gegen die Erfolgskriterien 2.4.3 verstößt.

    In den Schritten 7 bis 11 wird beschrieben, wie der Link Oracle JET Developer's Guide an die korrekte Position in der Registerkartenfolge zurückgegeben wird. Die Schritte 12 bis 16 veranschaulichen, wie Sie bestätigen können, dass der Fix funktioniert hat.

  7. Suchen Sie in Ihrem Codeeditor den Link Oracle JET Developer's Guide in der Datei resources.html.

    <li><a tabindex="-1"
   href="https://docs.oracle.com/en/middleware/developer-tools/jet/13/books.html"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

    Mit dem Attribut tabindex="-1" wird dieser Link vollständig aus der Registerkartenreihenfolge der Seite entfernt.

  8. Ändern Sie den Wert des Attributs tabindex in 0, um den Link an die richtige Stelle in der Registerkartenfolge der Seite zurückzugeben.

    <li><a tabindex="0"
   href="https://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=OJACC"
   target="_blank">Oracle JET Developer's Guide</a>
</li>

  9. Speichern und schließen Sie die Datei. Die Seite "Ressourcen" im Browser wird automatisch mit dem neuen Inhalt aktualisiert.

  10. Drücken Sie <Ctrl+L>, um den Fokus auf die Adressleiste zu setzen.

  11. Drücken Sie dreimal <Tab>, um den Fokus auf Einführung im Navigationsmenü zu verschieben.

  12. Drücken Sie <Tab>, um den Fokus auf den Link Oracle JET-Hauptsite zu verschieben.

  13. Drücken Sie <Tab>, um den Fokus auf den Link Oracle JET Developer's Guide zu verschieben.

  14. Fahren Sie mit dem Drücken von <Tab> fort, bis der Fokus auf den Link Info zu Oracle im Seiten-Footer fällt.

    Nachdem Sie auf einer Seite alle fokussierbaren Elemente navigiert haben, stornieren Sie den Prozess. In manchen Fällen ändert sich der Pfad beim Navigieren mit der Tab-Taste nach hinten durch die Seite, neue Elemente werden angezeigt oder einige Elemente werden nicht mehr angezeigt.

  15. Verwenden Sie <Shift+Tab>, um die Reihenfolge von unten nach oben zu verschieben, um sicherzustellen, dass die sinnvolle Sequenz wahr ist, während Sie umgekehrt durch die Seite navigieren.

Aufgabe 4: Mit Kontrollen interagieren

Viele der in diesem Tutorial verwendeten Steuerelemente sind Oracle JET-spezifische Steuerelemente. Eine Funktion von Oracle JET besteht darin, dass die Komponenten mit bereits integrierter Barrierefreiheit auf der Tastatur entworfen wurden. Entwickler, die Oracle JET verwenden, können Komponenten direkt aus dem Oracle JET-Cookbook kopieren und dort ablegen. Auf den resultierenden Code kann dann zugegriffen werden.

Im Folgenden finden Sie eine kurze Liste allgemeiner Tastenanschläge für die Interaktion mit Standard-HTML-Komponenten:

Hinweis: Bei bestimmten Steuerelementen wie Navigationsmenüs, Registerkartenleisten, Optionsgruppen und ähnlichen Gruppensteuerelementen müssen Sie möglicherweise die Tabulatortaste zum Steuerelement drücken und dann mithilfe der Pfeiltasten darin navigieren.

Verwenden Sie die ausgeführte Startanwendung, um mit mehreren Oracle JET-Komponenten zu interagieren.

  1. Drücken Sie <Ctrl+L>, um den Fokus auf die Adressleiste zu setzen.

  2. Drücken Sie <Tab>, um den Fokus auf den Link "Navigation überspringen" zu verschieben.

  3. Drücken Sie <Tab>, um den Fokus im Benutzermenü oben rechts auf der Seite nach john.hancock@oracle.com zu verschieben.

    Entsprechend der Tastaturdokumentation des <oj-menu-button>-Elements wird durch Drücken von <Space>, <Enter> oder <down arrow> das Menü geöffnet, und durch Drücken von <Escape> wird das Menü geschlossen.

  4. Drücken Sie <Space>, um das Benutzermenü einzublenden. Der Fokus wird nach Voreinstellungen verschoben.

  5. Drücken Sie <down arrow>, um die Liste der Menüoptionen nach unten zu verschieben.

  6. Drücken Sie <Escape>, um das Benutzermenü zu schließen.

  7. Klicken Sie auf <Tab>. Der Fokus wird direkt unter dem Benutzermenü in das Hauptmenü Einführung verschoben.

    Weitere Informationen zu den spezifischen Tastenanschlägen für jede Oracle JET-Komponente finden Sie im Oracle JET Keyboard and Gesture Guide.

Aufgabe 5: Tastaturfalle identifizieren

Das letzte Thema, das zu Beginn dieses Tutorials vorgestellt wurde, beinhaltet ein Konzept, das als Tastaturfalle bezeichnet wird. Eine Tastaturunterbrechung tritt auf, wenn ein Benutzer den Fokus nicht mit <Tab>, <Shift+Tab> oder einer der Pfeiltasten von einem Element auf der Seite entfernen kann.

Eine Tastaturfalle macht die gesamte Seite für einen Benutzer, der nur über die Tastatur verfügt, unbrauchbar. Die gängige Lösung für eine Tastaturfalle ist der Neustart der App.

Lassen Sie uns praktizieren!

Dieser Abschnitt des Lernprogramms enthält ein detailliertes Beispiel einer reinen Tastaturtestmethode.

Prüfen Sie beim Testen der Seite "Organisation" der App, ob immer ein sichtbarer Hinweis auf die Fokusposition vorhanden ist und ob der Fokus sich in einem vorhersehbaren Muster bewegt.

Auf die Seite, die Sie testen, wird über die Registerkarte "Organisation" auf der Seite "Einführung" zugegriffen.

Die Seite "Organisation"

Beschreibung der Abbildung org_page.png

Verwenden Sie die Starter-App, um einen Tastaturtest der Seite "Organisation" durchzuführen.

  1. Drücken Sie auf der Seite "Ressourcen" der App die Taste <Ctrl+L>, um den Fokus auf die Adressleiste zu setzen.

  2. Drücken Sie <Tab>, um den Fokus auf den Link "Navigation überspringen" zu verschieben.

  3. Drücken Sie <Tab>, um den Fokus im Benutzermenü oben rechts auf der Seite nach john.hancock@oracle.com zu verschieben.

  4. Drücken Sie <Tab>, um den Fokus auf Einführung im Hauptnavigationsmenü unter dem Benutzernamen zu verschieben.

    Entsprechend der Tastaturdokumentation des <oj-navigation-list>-Elements können Sie mit den Tasten <up arrow> und <down arrow> durch die Elemente im Hauptnavigationsmenü navigieren.

  5. Klicken Sie auf <Enter>, um Einführung auszuwählen.

  6. Drücken Sie <Tab> und dann <right arrow>, um den Fokus auf die Registerkarte "Organisation" in der Registerkartenleiste zu verschieben. Drücken Sie <Enter>, um die Seite "Organisation" zu laden.

    Gemäß der Tastaturdokumentation des <oj-tab-bar>-Elements können Sie sich mithilfe der Pfeiltasten in der Registerkartenleiste bewegen.

  7. Drücken Sie <Tab>, um den Fokus in die Baumansicht zu verschieben. Der Fokus liegt auf dem ersten fokussierbaren Element, dem Knoten Buchhaltung.

    Entsprechend der Tastaturdokumentation des <oj-tree-view>-Elements verwenden Sie die Tasten <up arrow> und <down arrow>, um in der Baumansicht zwischen den Knoten zu navigieren.

  8. Drücken Sie <right arrow>, um den Gruppenknoten Accounting im Baum einzublenden, und drücken Sie dann <left arrow>, um den Gruppenknoten auszublenden.

  9. Drücken Sie zweimal <down arrow>, um den Fokus auf den Mitarbeiter JONES im Gruppenknoten RESEARCH zu verschieben. Drücken Sie dann <Enter>, um es auszuwählen.

    Rechts auf der Seite wird ein Formular mit Mitarbeiterdetails angezeigt.

    Registerkarte "Organisation" mit Formular "Mitarbeiterdetails"

    Beschreibung der Abbildung org_page_form.png

  10. Drücken Sie <Tab>, um den Fokus auf das Feld Mitarbeiter-ID zu verschieben.

  11. Drücken Sie <Tab>, um den Fokus auf das Feld Mitarbeitername zu verschieben.

  12. Drücken Sie <Tab>, um den Fokus in das Feld Tätigkeit zu verschieben.

  13. Drücken Sie <Tab>, um den Fokus auf das Feld Einstellungsdatum zu verschieben und ein erweitertes Kalenderraster anzuzeigen.

    Gemäß der Tastaturdokumentation des <oj-date-picker>-Elements drücken Sie die Pfeiltasten, um den Datumsfokus im Kalenderraster zu ändern.

  14. Drücken Sie <down arrow>, und verschieben Sie den Fokus mithilfe der Pfeiltasten auf ein Datum in der erweiterten Datumsauswahl. Drücken Sie dann <Enter>, um ein Datum auszuwählen.

  15. Drücken Sie <Tab>, um den Fokus auf das Feld Gehalt zu verschieben.

    Entsprechend der Tastaturdokumentation des <oj-input-number>-Elements verwenden Sie <up arrow>, um den Gehaltswert zu erhöhen, und <down arrow>, um den Gehaltswert zu verringern.

  16. Drücken Sie <Tab>, und versuchen Sie, den Fokus in das Feld Manager-ID zu verschieben.

    Haben Sie bemerkt, dass der Fokus, sobald er in das Feld Gehalt verschoben wurde, durch Drücken von <Tab> oder <Shift+Tab> nicht aus dem Feld verschoben wurde? Dieses Feld verfügt über eine Tastaturfalle. Ohne eine Korrektur des Codes können Sie die Trap nur beenden, indem Sie die Seite aktualisieren.

Aufgabe 6: Entfernen der Trap

  1. Navigieren Sie zum Ordner src/js/views, und öffnen Sie die Datei organization.html in einem Editor.

  2. Suchen Sie das Element <oj-input-number>, wobei id="salary":

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1"
   on-blur="[[setKeyTrap]]">
</oj-input-number>

    Entfernen Sie das Attribut on-blur, das die Tastaturtrap verursacht.

       
<oj-input-number id="salary"
   label-hint="Salary"
   value="{{empDetails().sal}}"
   min="0"
   step="1">
</oj-input-number>

  3. Speichern Sie die Datei. Wiederholen Sie anschließend die Schritte in der vorherigen Aufgabe Identify a Keyboard Trap, um sicherzustellen, dass die Tastaturtrap entfernt wurde.

  4. Wenn Sie das Feld Manager-ID erreichen, drücken Sie <Tab>, um den Fokus auf die Optionsfelder Jobs zu verschieben.

    Entsprechend der Tastaturdokumentation des <oj-radioset>-Elements verwenden Sie <up arrow>, um die vorherige Schaltfläche in der Gruppe auszuwählen. Verwenden Sie <down arrow>, um die nächste Schaltfläche in der Gruppe auszuwählen.

  5. Drücken Sie <Tab>, um den Fokus auf den Link Info zu Oracle im Footer-Abschnitt der Seite zu verschieben.

  6. Kehren Sie den Prozess um. Drücken Sie <Shift+Tab>, um zu den Optionsfeldern Jobs zurückzukehren. Drücken Sie weiterhin <Shift+Tab>, um im Benutzermenü zu john.hancock@oracle.com zurückzukehren.

Lesen Sie den Oracle JET Keyboard and Gestures Guide, wenn Sie Fragen zu den Tastenanschlägen haben, die für die Verwendung oder Navigation in einer Oracle JET-Komponente erforderlich sind.

Die Testphase "Nur Tastatur" ist abgeschlossen. Fahren Sie mit dem letzten Tutorial in diesem Lernpfad fort: Validierung der Bildschirmsprachausgabe in einer Oracle JET-App ausführen.

Weitere Lernressourcen

Sehen Sie sich weitere Übungen unter docs.oracle.com/learn an, oder greifen Sie auf weitere kostenlose Lerninhalte im Oracle Learning-Kanal YouTube zu. Besuchen Sie außerdem education.oracle.com/learning-explorer, um Oracle Learning Explorer zu werden.

Die Produktdokumentation finden Sie im Oracle Help Center.