Verfügbarkeit von Oracle JET Components-Tabellen und -Nachrichten prüfen

Einführung

Im Tutorial Screen-Reader-Validierung in einer Oracle JET-App ausführen haben wir verschiedene Probleme mit der Barrierefreiheit auf der Seite "Mitarbeiter" behoben. Es gibt noch einige Fragen, die wir in diesem Tutorial behandeln werden.

Ziele

In diesem Tutorial erfahren Sie, wie Sie die verbleibenden Barrierefreiheitsprobleme auf der Seite "Mitarbeiter" 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 von Masterdetailansichten in einer Oracle JET-App validieren

Aufgabe 1: Seitenstruktur prüfen

Der erste Schritt in der Überprüfung besteht darin, sicherzustellen, dass alle erforderlichen HTML-Überschriften auf der Seite vorhanden sind.

Navigieren Sie zum Verzeichnis ACCLearningPath im Terminal, und führen Sie die Anwendung aus.
```
$ ojet serve
```
Ihr Browser öffnet sich auf der Einführungsseite der App, wobei die Registerkarte Übersicht geladen ist. Klicken Sie in der Registerkartenleiste auf die Registerkarte "Mitarbeiter", und prüfen Sie die Seite "Mitarbeiter".

Die Seite "Mitarbeiter" besteht aus zwei Fensterbereichen. Die HTML-Überschriften fehlen auf der Seite selbst und in jedem Fensterbereich.
Navigieren Sie zum Ordner ACCLearningPath/src/js/views, und öffnen Sie die Datei employees.html in einem Editor.

Suchen Sie das erste öffnende <div>-Tag in der Datei.

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Fügen Sie unmittelbar nach dem öffnenden Tag <div> eine Überschrift h3 ein, um die Seite "Employees" zu identifizieren.

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Suchen Sie das öffnende <div>-Tag, das den linken Bereich bildet, der eine Tabelle enthält.

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Fügen Sie zwischen den geöffneten Tags <div> und <oj-table> eine Überschrift h4 ein, um diesen Bereich ordnungsgemäß zu beschriften.

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Bearbeiten Sie das Attribut aria-label des Elements <oj-table>, um sowohl den Überschriftstext als auch den im zweiten Fensterbereich angezeigten Anweisungstext einzuschließen.
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
Die Tabelle entspricht jetzt sowohl WCAG Success Criterion 2.5.3 Label in Name als auch WCAG Success Criterion 1.3.1 Info and Relationships. Um diese Kriterien zu erfüllen, müssen sowohl das visuelle Label als auch der Anweisungstext aus dem rechten Panel in das gesprochene Label eines Steuerelements aufgenommen werden.

Suchen Sie das öffnende Tag <div>, das den rechten Bereich der Seite "Mitarbeiter" definiert, auf der die Mitarbeiterdetails gespeichert werden.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

Fügen Sie zwischen den Tags <div> und <oj-bind-if> eine Überschrift h4 unter der horizontalen Regel ein, die diesen Bereich identifiziert.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

Speichern Sie die Datei. Die Datei sollte ungefähr wie employees-page-html.txt aussehen.
Überprüfen Sie die angewendeten Änderungen in der ausgeführten App.

Aufgabe 2: Nur Tastaturtests durchführen

Dieser Abschnitt und der folgende Teil Bildschirmlesertest ausführen dieses Tutorials müssen ohne Maus ausgeführt werden. Stellen Sie während dieses Tests sicher, dass der Fokuspunkt immer klar identifiziert wird und die Tab-Reihenfolge vorhersehbar ist.

Drücken Sie auf der Seite "Mitarbeiter" <Ctrl+L>, um die Adressleiste zu fokussieren.
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 direkt unter dem Benutzermenü im Hauptnavigationsmenü zu Einführung verschoben.
Drücken Sie <Tab>. Der Fokus wird in der Registerkartenleiste zu Überblick verschoben.
Drücken Sie <Tab>. Der Fokus wird in der Mitarbeitertabelle in die erste Spaltenüberschrift, Mitarbeiternummer, verschoben.
Drücken Sie <down arrow>, um die erste Datenzeile der Tabelle zu fokussieren.

Das Formular "Mitarbeiterdetails" sollte im Fensterbereich rechts auf der Seite angezeigt werden.
Klicken Sie auf <Space>, um die Zeile auszuwählen. Drücken Sie dann <F2>, um den Fokus zum ersten tabellarischen Element, der Schaltfläche Bearbeiten, zu verschieben.
Klicken Sie auf <Space>, um die Schaltfläche Edit zu aktivieren. Das Dialogfeld "Mitarbeiter bearbeiten" wird geöffnet, und der Fokus wird in das Feld Mitarbeiter-ID verschoben.
Drücken Sie <Tab>. Der Fokus wird in das Feld Name des Mitarbeiters verschoben.
Drücken Sie <Tab>. Der Fokus wird in das Feld Tätigkeit verschoben.
Drücken Sie <Tab>. Der Fokus wird in das Feld Einstellungsdatum verschoben.
Drücken Sie <Tab>. Der Fokus wird in das Feld Gehalt verschoben.
Drücken Sie <Tab>. Der Fokus wird auf die Schaltfläche Speichern verschoben.
Klicken Sie auf <Space>, um die Schaltfläche Save zu aktivieren und das Dialogfeld zu schließen. Der Fokus wird zurück in die ausgewählte erste Datenzeile der Mitarbeitertabelle verschoben.

Beachten Sie das Meldungsfeld in der oberen linken Ecke der Seite. Im Meldungsfeld wird bestätigt, dass die Aktualisierungen gespeichert wurden.

Die Software zur Bildschirmvergrößerung konzentriert sich auf die Mitarbeitertabelle, sodass die Bestätigungsmeldung außerhalb des Darstellungsbereichs der Lupe liegen kann.
Navigieren Sie zum Ordner ACCLearningPath/src/js/viewModels, und bearbeiten Sie employees.js.

Suchen Sie die Definition von this.positionObject.

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

Ändern Sie die Definition positionObject, sodass der Speicherort des Objekts nicht auf dem Fenster, sondern auf der Tabelle basiert.
```
  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };
```
Speichern Sie die Datei. Wiederholen Sie dann die Schritte 1 bis 15 des Nur-Tastaturtests, um zu prüfen, ob der Speicherort der Bestätigungsmeldung in die Tabelle verschoben wurde.

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 "Mitarbeiter". 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 "Mitarbeiter" ausgewählt. 3 von 4."
Drücken Sie <Tab>. JAWS sagt: "Tabelle mit 6 Spalten und mehr als 13 Zeilen. Mitarbeitertabelle – Aktivieren Sie eine Zeile, um Mitarbeiterdetails anzuzeigen. Spaltenheader 1, Personalnummer." Der Fokus wird in die erste Zelle in der Zeile der Tabellenspaltenheader verschoben.
Drücken Sie <down arrow>. JAWS sagt: "Zeile 1:7839. Auswahl aufgehoben. Spalte 1, Personalnummer: 7839." Der Fokus befindet sich in der ersten Datenzeile der Tabelle.
Drücken Sie <right arrow>. JAWS gibt die Spaltennummer und den Benutzernamen des Mitarbeiters an.
Drücken Sie <Space>. Die Zeile wird ausgewählt, und JAWS sagt: "Raum. Ausgewählt."
Drücken Sie <F2>, um zum ersten tabellarischen Element zu wechseln. JAWS sagt: "Edit button. Zum Aktivieren drücken Sie die Eingabetaste."
Klicken Sie auf <Enter>. JAWS sagt: "Bearbeiten Sie den Mitarbeiter. Mitarbeiter bearbeiten Mitarbeiter-ID 7.839…" Die Sprachausgabe öffnet das Dialogfeld "Mitarbeiter bearbeiten" und liest weiter, bis eine Taste gedrückt wird.
Klicken Sie fünfmal auf <Tab>, um die bearbeitbaren und schreibgeschützten Felder auf die Schaltfläche Speichern zu verschieben. JAWS sagt: "Save button. Zum Aktivieren drücken Sie die Eingabetaste."
Klicken Sie auf <Enter>. JAWS sagt: "Nachrichtenkategorie: Bestätigung. Aktualisierungen gespeichert. Die Änderungen für Mitarbeiter Onegin wurden gespeichert." Der Benutzername des Mitarbeiters in Ihrer App kann hier abweichen, da Änderungen in einem früheren Tutorial vorgenommen wurden.
Drücken Sie <F6>, um den Inhalt des Nachrichtenfelds zu lesen. JAWS sagt: "Nachrichten ergänzen die Region. Aktualisierungen gespeichert. Nachrichtenregion eingeben Drücken Sie F6, um zum vorherigen fokussierten Element zurückzukehren."
Drücken Sie <Tab>. JAWS sagt: "Schaltfläche schließen. Zum Aktivieren drücken Sie die Eingabetaste."
Klicken Sie auf <Enter>, um das Meldungsfenster zu schließen. Focus kehrt zur Tabelle und zur vorherigen ausgewählten Zelle zurück.
Bildschirmsprachausgabe stoppen
Beenden Sie die App im Terminalfenster, indem Sie <Ctrl+C> drücken. Geben Sie bei entsprechender Aufforderung y ein.

Damit ist die dritte Gruppe von Fixes für Barrierefreiheit abgeschlossen.

Nächsten Schritt

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

Dieses Tutorial ist Teil des Moduls Eingabehilfen für Anwendungen validieren und korrigieren.

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 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.

Titel und Copyright-Informationen

Verify the accessibility of Oracle JET components table and message

F58361-02

Oracle und/oder verbundene Unternehmen.