Tastaturnavigation in komplexen Oracle JET-Komponenten testen

Einführung

Dies wird unser erster Blick auf die Registerkarte Abteilungen in der ACCLearningPath-App sein. Der im vorherigen Lernpfad in dieser Barrierefreiheitsreihe dargestellte Überprüfungsprozess wird befolgt, um Probleme bei der Barrierefreiheit zu identifizieren.

Ziele

In diesem Tutorial erfahren Sie, wie Sie die Probleme mit der Barrierefreiheit auf der Registerkarte "Abteilungen" der App ACCLearningPath identifizieren und beheben.

Voraussetzungen

Eine Entwicklungsumgebung, die eingerichtet ist, um Oracle JET-Anwendungen zu erstellen, wobei die Befehlszeilenschnittstelle JavaScript Runtime, Node.js und Oracle JET Release 13.0 (oder höher) installiert ist
Zugriff auf das Oracle JET Developer Cookbook
Zugriff auf das Oracle JET-Handbuch für Tastatur und Gesten
Abschluss des vorherigen Tutorials in diesem Lernpfad, Barrierefreiheit der Tabelle und Meldung von Oracle JET-Komponenten prüfen

Aufgabe 1: Seitenstruktur prüfen

Navigieren Sie im Terminalfenster zum Ordner ACCLearningPath, und führen Sie die Anwendung aus.
```
$ ojet serve
```
Die App im Browser öffnet sich zur Einführungsseite, wobei die Registerkarte Übersicht geladen ist.
Klicken Sie in der Registerkartenleiste auf die Registerkarte "Abteilungen", und bewerten Sie die Seitenstruktur. Die Seite "Abteilungen" besteht aus drei Bereichen, in denen in jedem Bereich Abteilungsdaten mit verschiedenen Oracle JET-Komponenten angezeigt werden.
Navigieren Sie zum Ordner ACCLearningPath/src/js/views, und öffnen Sie die Datei departments.html in einem Codeeditor.

Suchen Sie das Haupt-Tag <div> in der Datei.

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Fügen Sie eine Überschrift h3 zwischen den beiden <div>-Tags ein, um die Seite "Abteilungen" zu identifizieren.

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Suchen Sie das Tag <div>, das den mittleren Fensterbereich mit einem Filmstreifen definiert.

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

Fügen Sie eine h4-Überschrift zwischen den öffnenden Tags <div> und <oj-filmstrip> ein, um den Fensterbereich zu identifizieren und ein sichtbares Label für den Filmstreifen bereitzustellen.
```
<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >
```

Suchen Sie das Tag <div>, das den linken Bereich bildet, der ein Datenraster enthält.

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Fügen Sie eine h4-Überschrift zwischen den Tags <div> und <oj-data-grid> ein, um den Bereich zu identifizieren und ein sichtbares Label für das Datenraster bereitzustellen.

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Suchen Sie das öffnende <div>-Tag, das den dritten Bereich bildet, der ein Diagramm enthält.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
        . . . >

Fügen Sie eine Überschrift h4 zwischen den öffnenden Tags <div> und <oj-chart> ein. Diese Überschrift identifiziert das Fenster und dient als visuelles Label für das Diagramm.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <h4>Salaries by Department</h4>
     <oj-chart id="pieChart"
        type="bar"
        data="[[chartDataProvider]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        . . . >

Speichern Sie die Datei. Überprüfen Sie im Browser die Änderungen an der Registerkarte "Abteilungen" Ihrer App.

Aufgabe 2: Nur Tastaturtests durchführen

Der zweite Teil der Barrierefreiheitsprüfung besteht darin, einen Nur-Tastaturtest auf der Registerkarte "Abteilungen" der App durchzuführen.

Drücken Sie <Ctrl+L>, um den Fokus auf die Adressleiste zu setzen.
Drücken Sie <Tab>. Der Fokus wird zum Überspringen-Link verschoben.
Drücken Sie <Tab>. Der Fokus wird im Benutzermenü oben rechts auf der Seite zu john.hancock@oracle.com verschoben.
Drücken Sie <Tab>. Der Fokus wird im Navigationsmenü direkt unter dem Benutzermenü in Einführung verschoben.
Drücken Sie <Tab>. Der Fokus wird in der Registerkartenleiste zu Überblick verschoben.
Drücken Sie <Tab>. Der Fokus wird im Filmstreifen auf Buchhaltung gesetzt.
Drücken Sie <right arrow>, um zum nächsten Eintrag, Research, im Filmstreifen zu gelangen.
Drücken Sie <left arrow>, um im Filmstreifen zurück zur Buchhaltung zu wechseln.
Drücken Sie dreimal <right arrow>. Der Fokus wird auf den letzten Eintrag im Filmstreifen Operations verschoben.
Drücken Sie <Tab>. Der Fokus wird in die erste Datenzelle im Datenraster unter der Spalte ID verschoben. Der Wert der fokussierten Zelle ist 10.
Drücken Sie <right arrow>. Der Fokus wird in die Buchhaltung unter der zweiten Spalte des Datenrasters Name verschoben.
Drücken Sie <right arrow>. Der Fokus wird in der letzten Spalte des Datenrasters, Standort, zu New York verschoben.

Beachten Sie, dass der Fokus um die Zelle herum angezeigt wird, die den Ortsnamen enthält.
Drücken Sie <F2>. Die Fokusstruktur strafft, um nur den Text New York in der Zelle zu umgeben.

Verwenden Sie gemäß der Tastaturdokumentation des <oj-data-grid>-Elements <F2>, um den Inhalt der Zelle verwertbar zu machen. Mit dem Funktionstaste <F2> können Sie Aktionen initiieren, die von der aktiven Komponente unterstützt werden. In diesem Fall enthält die Zelle einen Link zu Google Maps, den Sie aktivieren.
Klicken Sie auf <Enter>, um den Link New York zu aktivieren. Ein neues Browserfenster öffnet sich zu einer Google Maps-Seite von New York.
Drücken Sie <Ctrl+F4>, um das Google Maps-Fenster zu schließen.
Drücken Sie <Esc>. Die Fokusstruktur wird um die Zelle erweitert, die New York in der dritten Spalte enthält.

Verwenden Sie gemäß der Tastaturdokumentation des <oj-data-grid>-Elements <Esc>, um den aktionsunterstützenden Modus zu beenden, sodass Sie weiterhin zu anderen Komponenten navigieren können.
Drücken Sie <Tab>. Der Fokus wird auf den ersten Balken im Balkendiagramm verschoben.

Der letzte Teil der Barrierefreiheitsüberprüfung ist die Screen-Reader-Validierung. Die folgenden Validierungsschritte basieren auf der Verwendung der JAWS-Bildschirmsprachausgabe. Die Ergebnisse sind jedoch ähnlich, wenn Sie die NVDA-Bildschirmsprachausgabe verwenden.

Beenden Sie im Terminalfenster die ausgeführte App, indem Sie <Ctrl+C> drücken, und geben Sie bei entsprechender Aufforderung y ein.
Starten Sie Ihre Sprachausgabe und starten Sie dann Ihre Web-App neu.
```
$ ojet serve
```
Ihre App wird automatisch in Ihrem Browser geöffnet; die Sprachausgabe beginnt zu lesen, sobald die Seite vollständig geladen ist.
Klicken Sie in der Registerkartenleiste auf die Registerkarte "Abteilungen". Verwenden Sie nach diesem Punkt keine Maus.
Drücken Sie <Ctrl+L>, um die Adressleiste zu fokussieren.
Drücken Sie <Tab>. JAWS lautet: "Zum Hauptinhalt wechseln. Gleicher Seitenlink."
Drücken Sie <Tab>. JAWS sagt: "Banner-Region. Symbolleiste. Schaltflächenmenü john.hancock@oracle.com. Drücken Sie die Leertaste, um das Menü zu aktivieren, und navigieren Sie dann mit den Pfeiltasten."
Drücken Sie <Tab>. JAWS sagt: "Registerkarte "Navigationsbereich". Registerkarte "Einführung" ausgewählt. 1 von 2."
Drücken Sie <Tab>. JAWS sagt: "Registerkarte Hauptregion. Registerkarte "Abteilungen" ausgewählt. 4 von 4."
Drücken Sie <Tab>, um den Fokus auf den Filmstreifen zu verschieben. JAWS sagt: "Buchhaltung. New York. 3 Mitarbeiter. Seite 1 von 4 wird angezeigt."
Drücken Sie <Tab>, um den Fokus in das Datenraster zu verschieben. JAWS sagt: "Dies ist ein Datenraster mit 4 Zeilen und 3 Spalten. ID. Name Standort." Nachdem die Spaltenüberschriften gelesen wurden, liest die Sprachausgabe die Datenbankzellen der Tabelle von links nach rechts. Dann wird der aktuelle Fokus gelesen: "Zeile 1. Spalte 1. ID: 10."
Drücken Sie <right arrow>. JAWS sagt: "Säule 2. Name: Buchhaltung."
Drücken Sie <right arrow>. JAWS sagt: "Spalte 3. Ort: New York. Enthält Steuerelemente Sie haben die letzte Spalte erreicht."
Drücken Sie <Tab>. JAWS sagt: "Datenvisualisierung: Diagramm. Grafik. Serie: Buchhaltung; Gruppe: Abteilung; Wert: USD 3.750,00. Grafik."

Wenn sich der Fokus zwischen den Panels bewegt, gibt JAWS keinen Hinweis auf die Panel-Überschriften. Es gibt auch keine Möglichkeit, den Filmstreifen von Seite zu Seite zu scrollen.
Öffnen Sie die Datei departments.html im Codeeditor.
- Erfolgskriterium 4.1.2 - Name, Rolle, Wert erfordert, dass jeder Komponente in den drei Bereichen ein Label zugeordnet ist. Die Überschriften der Ebene 4 dienen als sichtbare Beschriftungen.
- Label für Erfolgskriterium 2.5.3 in Name erfordert, dass der gesamte Text der Überschrift in das Label aufgenommen wird. Die in den folgenden Schritten 18 bis 23 hinzugefügten aria-label-Attribute enthalten den Überschriftentext für den Fensterbereich.

Suchen Sie das öffnende Tag <oj-film-strip>, und fügen Sie ein Attribut aria-label hinzu.

  <oj-film-strip id="deptFilmstrip"
     max-items-per-page="1"
     aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
     arrow-visibility="hidden"
     class="demo-stretch-items"
     . . . >

Suchen Sie das öffnende Tag <oj-data-grid>, und fügen Sie ein Attribut aria-label hinzu.

  <oj-data-grid id="datagrid"
     style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
     aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
     data="[[dgDataProvider]]"
     header.column.style="[[getCellWidth]]"
     . . . >

Suchen Sie das öffnende Tag <oj-chart>, und fügen Sie ein Attribut aria-label hinzu.

  <oj-chart id="pieChart"
     type="bar"
     aria-label="Salaries by Department bar chart"
     data="[[chartDataProvider]]"
     animation-on-display="auto"
     animation-on-data-change="auto"
     . . . >

Die letzte Änderung beinhaltet die Paginierungssteuerung für den Filmstreifen im mittleren Panel.

Suchen Sie die schließenden Tags </oj-film-strip> und </oj-bind-if>.

        </oj-film-strip>
     </div>
  </div>
  </oj-bind-if>

Fügen Sie das Paginierungssteuerelement und die umgebenden div-Elemente zwischen den schließenden </div>- und </oj-bind-if>-Tags hinzu.

        </oj-film-strip>
     </div>
  </div>
  <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
     <div class="oj-flex-item">
        <div style="text-align: center;">
        <div style="display: inline-block;margin-top: 4px;">
           <oj-paging-control id="pagingControl"
              aria-controls="deptFilmstrip"
              data="[[pagingModel]]"
              page-size="0"
              page-options='{"type": "dots"}'>
           </oj-paging-control>
        </div>
        </div>
     </div>
  </div>
  </oj-bind-if>

Speichern Sie die Datei. Die Datei sollte ungefähr wie departments-html.txt aussehen.
Starten Sie die Screen-Reader-Validierung erneut. Stellen Sie sicher, dass die Etiketten für den Filmstreifen, das Datenraster und das Diagramm vorgelesen werden und dass die Seitenumbruchsteuerelemente unter dem Filmstreifen vorhanden sind.

Nächsten Schritt

In diesem Tutorial wird das Modul Eingabehilfen für Anwendungen validieren und korrigieren in diesem Lernpfad zur Barrierefreiheit für Webanwendungen abgeschlossen.

Vernetzte Lebenszyklusereignisse anpassen
Verfügbarkeit von Masterdetailansichten in einer Oracle JET-Anwendung validieren
Verfügbarkeit von Oracle JET Components-Tabellen und -Nachrichten prüfen
Tastaturnavigation in komplexen Oracle JET-Komponenten testen

Sie können zur Hauptseite des Lernpfads "Zugänglichkeit" zurückkehren, um auf alle Module zur Barrierefreiheit sowie auf andere Lernpfade 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.

Titel und Copyright-Informationen

Test keyboard navigation in complex Oracle JET components

F58352-02

Oracle und/oder verbundene Unternehmen.