Oracle JET-App auf Barrierefreiheit nur mit Tastatur testen

Einführung

Dies ist das zweite Tutorial im Lernpfad Barrierefreiheitsprobleme identifizieren.

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

Eine App, die nur über die Tastatur zugänglich ist, kann mit alternativen Eingabegeräten für Personen mit eingeschränkter Mobilität oder einer Unfähigkeit, eine Maus zu manipulieren, verwendet werden. Wenn Leute eine Tastatur benutzen können, ist das Internet an ihren Fingerspitzen.

Ziele

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

Voraussetzungen

Aufgabe 1: Nur-Tastatur-Tests vorbereiten

Die visuelle Inspektion bietet einen Überblick über die Struktur und die grundlegenden Funktionen einer zugänglichen Seite. Nur-Tastatur-Tests stehen im Mittelpunkt manueller Zugänglichkeitstests. Es gibt dem Entwickler die Möglichkeit, aus Sicht eines deaktivierten Benutzers mit der App zu interagieren. Die Teilmenge der WCAG 2.2-Erfolgskriterien, auf die sich dieses Tutorial konzentriert, umfasst mehrere spezifische Konzepte.

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

Mit diesen anwendbaren Konzepten definiert und erklärt, sind Sie bereit, die Starter-App zu testen.

Beachten Sie den Text "Keine Ausnahme" in den Klammern von Erfolgskriterium 2.1.3. Dies bedeutet, dass die Barrierefreiheit der Tastatur obligatorisch ist.

Die WCAG-Richtlinie 2.1 und das darauf folgende Erfolgskriterium unterstreichen die absolute Notwendigkeit der Barrierefreiheit der Tastatur. Die Tastatur spielt eine zentrale Rolle, wenn es darum geht, Technologie für alle zugänglich zu machen.

Aufgabe 2: Vorhandensein eines visuellen Fokus prüfen

Nur für die Tastatur geltende Barrierefreiheitstests basieren ausschließlich auf der Fokusanzeige. Die Einhaltung der folgenden "Focus Visible" Erfolgskriterium ist nicht verhandelbar. Deaktivierte Benutzer können nicht ohne aktiven Fokus in einer App navigieren oder wenn die Fokusplatzierung unklar ist.

Wenn Sie über die Web-App navigieren, sollte es immer einen sichtbaren Indikator geben, der den Fokusort identifiziert. Der Indikator ist in der Regel ein Rechteck. Wenn Sie das Fokusrechteck deaktivieren, wird dieses Kriterium nicht erfüllt.

App-Entwickler sind stolz auf die Apps und Programme, die sie schreiben. Ihr Ziel ist es, die Funktion mit einer visuell ansprechenden Erfahrung zu integrieren. Ein Fokus-Rechteck beeinträchtigt häufig das Design; Entwickler verbergen oder deaktivieren es daher oft und verletzen Erfolgskriterium 2.4.7.

Fokusrechteck 1

Fokusrechteck 1

Fokusrechteck 2

Fokusrechteck 2

Suchen Sie den Fokuspunkt in den beiden Screenshots oben.

Der erste Screenshot, Fokusrechteck 1, stellt eine Seite mit einer korrekten Anzeige des Fokus dar. Der Fokusindikator ist sehr offensichtlich, da er die Registerkarte Übersicht oben links auf der Seite umgibt. Im zweiten Screenshot Fokusrechteck 2 fehlt ein Hinweis auf den Fokus auf der Registerkarte "Überblick".

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 zu setzen, 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 auf john.hancock@oracle.com im Benutzermenü oben rechts auf der Seite zu verschieben.

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

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

    Seite "Ressourcen"

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

    Beachten Sie, dass es keine eindeutigen Hinweise auf die Fokusposition gibt. Die Seite "Ressourcen" ist nicht erfolgreich. Erfolgskriterium 2.4.7.

    In den folgenden Schritten beheben Sie das Problem mit dem fehlenden Fokusrechteck, um 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 Stilattribut 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 ungefähr wie resources-html.txt aussehen.

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

Aufgabe 3: Relevante Registerkartenfolge prüfen

Das nächste Stück des Nur-Tastatur-Tests beinhaltet die Organisation einer Seite als Benutzerregisterkarten.

Die Fokusreihenfolge lässt sich am besten mit einer Illustration verstehen. Wenn die Benutzer über die Seite navigieren, 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 Tab-Reihenfolge zu veranschaulichen.

  1. Drücken Sie in der ausgeführten App <Ctrl+L>, um die Adressleiste zu fokussieren.
  2. Drücken Sie <Tab>, um den Fokus auf den Link "nav überspringen" zu verschieben.
  3. Drücken Sie <Tab>, um den Fokus auf john.hancock@oracle.com im Benutzermenü oben rechts auf der Seite zu verschieben.
  4. Drücken Sie <Tab>, um den Fokus im Hauptnavigationsmenü auf Einführung zu verschieben.
  5. Drücken Sie <Tab>, um den Fokus auf den Link Oracle JET-Hauptsite im Hauptteil der Seite zu verschieben.

  6. Drücken Sie <Tab>. Der Fokus sollte auf das Oracle JET Developer's Guide verschoben werden, stattdessen wird der Link Oracle JET Cookbook angezeigt.

    Der Link Oracle JET Developer's Guide befindet sich nicht in der Registerkartenfolge. Dies verstößt gegen Erfolgskriterien 2.4.3.

    Die Schritte 7 bis 11 beschreiben die erforderliche Methode, um den Link Oracle JET Developer's Guide an die richtige Position in der Registerkartenfolge zurückzugeben. Die Schritte 12 bis 16 zeigen, wie Sie bestätigen können, dass die Korrektur 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://www.oracle.com/pls/topic/lookup?ctx=jetlatest&id=JETDG"
   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=JETDG"
   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 die <Tab>, um den Fokus im Navigationsmenü auf Einführung 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. Drücken Sie weiterhin <Tab>, bis der Fokus auf dem Link Info zu Oracle im Seiten-Footer angezeigt wird.

    Nachdem Sie alle fokussierbaren Elemente auf einer Seite navigiert haben, kehren Sie den Prozess um. Manchmal ändert sich der Pfad, wenn Sie die Tabulatortaste rückwärts durch eine Seite verschieben, unerwartet, neue Elemente werden angezeigt oder einige Elemente verschwinden.

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

Aufgabe 4: Mit Kontrollen interagieren

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

Beispiel: Hier ist eine kurze Liste der gängigen 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 mit der Tabulatortaste in das Steuerelement navigieren und dann mit den Pfeiltasten darin navigieren.

Mit der aktiven Starter-App können Sie mit mehreren Oracle JET-Komponenten 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 "nav überspringen" zu verschieben.

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

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

  4. Drücken Sie <Space>, um das Benutzermenü einzublenden. Focus wechselt zu Settings (Voreinstellungen).

  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. Drücken Sie <Tab>. Der Fokus wird direkt unter dem Benutzermenü im Haupt-Navigationsmenü zu 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, umfasst ein Konzept, das als Tastaturfalle bezeichnet wird. Eine Tastaturfalle tritt auf, wenn ein Benutzer den Fokus nicht von einem Element auf der Seite mit <Tab>, <Shift+Tab> oder einer der Pfeiltasten wegbewegen kann.

Eine Tastaturfalle macht die gesamte Seite für einen Nur-Tastaturbenutzer unbrauchbar. Die gängige Lösung für eine Tastaturfalle besteht darin, die App neu zu starten.

Lassen Sie uns praktisch werden!

Dieser Abschnitt des Tutorials enthält ein detailliertes Beispiel für eine Testmethode, die nur auf der Tastatur getestet wird.

Prüfen Sie beim Testen der Seite "Organisation" der App, ob der Fokus immer sichtbar ist und sich in einem vorhersehbaren Muster bewegt.

Die Seite, die Sie testen möchten, wird über die Registerkarte "Organisation" auf der Seite "Einführung" aufgerufen.

Seite "Organisation"

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

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

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

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

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

    Verwenden Sie entsprechend der Tastaturdokumentation des <oj-navigation-list>-Elements die Tasten <up arrow> und <down arrow>, um durch Elemente im Hauptnavigationsmenü zu navigieren.

  5. Klicken Sie auf <Enter>, um Einführung zu wä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.

    Entsprechend der Tastaturdokumentation des <oj-tab-bar>-Elements können Sie Pfeiltasten innerhalb der Registerkartenleiste verwenden.

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

    Verwenden Sie gemäß der Tastaturdokumentation des <oj-tree-view>-Elements die Tasten <up arrow> und <down arrow>, um zwischen Knoten in der Baumansicht zu navigieren.

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

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

    Auf der rechten Seite der Seite wird ein Formular mit Mitarbeiterdetails angezeigt.

    Registerkarte "Organisation" mit Maske "Mitarbeiterdetails"

  10. Drücken Sie <Tab>, um den Fokus in das Feld Personalnummer zu verschieben.
  11. Drücken Sie <Tab>, um den Fokus in das Feld Name des Mitarbeiters 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 in das Feld Einstellungsdatum zu verschieben und ein erweitertes Kalenderraster anzuzeigen.

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

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

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

    Verwenden Sie gemäß der Tastaturdokumentation des <oj-input-number>-Elements <up arrow>, um den Gehaltswert zu erhöhen, und verwenden Sie <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, nachdem der Fokus in das Feld Gehalt verschoben wurde, durch Drücken von <Tab> oder <Shift+Tab> der Fokus nicht aus dem Feld verschoben wurde? Dieses Feld enthält eine Tastaturfalle. Ohne eine Korrektur des Codes besteht die einzige Möglichkeit, die Trap zu beenden, darin, die Seite zu aktualisieren.

Aufgabe 6: Trap entfernen

  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 Tastaturfalle auslöst.

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

  3. Speichern Sie die Datei. Danach wiederholen Sie die Schritte in der vorherigen Aufgabe Identify a Keyboard Trap (Tastaturtrap identifizieren), um sicherzustellen, dass die Tastaturtrap entfernt wurde.

  4. Wenn Sie zum Feld Manager-ID gelangen, klicken Sie auf <Tab>, um den Fokus auf die Optionsfelder Jobs zu verschieben.

    Verwenden Sie gemäß der Tastaturdokumentation des <oj-radioset>-Elements <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 Fußzeilenabschnitt der Seite zu verschieben.

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

Denken Sie daran, das Oracle JET Keyboard and Gestures Guide zu lesen, 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.

Nächsten Schritt

Fahren Sie mit dem nächsten Tutorial in diesem Modul fort.

Dieses Tutorial ist Teil des Moduls Barrierefreiheitsprobleme identifizieren.

Sie können zur Hauptseite des Lernpfads für Barrierefreiheit zurückkehren, um auf alle Module für Barrierefreiheit zuzugreifen.

Weitere Lernressourcen

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

Die Produktdokumentation finden Sie im Oracle Help Center.