Screen-Reader-Validierung für eine Oracle JET-App ausführen

Einführung

Wenn Sie eine Sprachausgabe mit einer Web-App verwenden, wird der Begriff Validierung anstelle des Wortes Test verwendet. Es gibt eine definitive Antwort mit einem Test; Validierung impliziert mehr als eine richtige Antwort. Das Ergebnis der Validierung ändert sich leicht, wenn sich die Browser- und Screenreader-Versionen ändern.

Die Web Content Accessibility Guidelines (WCAG) 2.2 enthalten eine Reihe von mehr als sechzig Erfolgskriterien zum Erstellen einer barrierefreien Webanwendung. In diesem Tutorial konzentrieren wir uns auf eine Untergruppe dieser Kriterien, die sich ausschließlich mit der Verwendung einer Bildschirmsprachausgabe für die Navigation in einer App befassen.

Idealerweise wird eine Screen-Reader-Überprüfung einer App ohne die Verwendung einer Maus durchgeführt und der Bildschirm ausgeschaltet oder abgedeckt.

Lernen Sie, sich auf die gesprochene Ausgabe der Bildschirmsprachausgabe zu verlassen, anstatt auf das, was visuell auf dem Bildschirm passiert. Was gesehen und gehört wird, kann drastisch anders sein. Beachten Sie, dass das Hören von Bildschirmsprachausgaben eine Herausforderung für diejenigen darstellen kann, die mit ihnen nicht vertraut sind.

Ziele

In diesem Tutorial erfahren Sie, wie Sie eine Web-App mit einer Sprachausgabe validieren und sich mit Screen-Reader-Stimmen vertraut machen.

Voraussetzungen

Aufgabe 1: Bildschirmsprachausgabe herunterladen und installieren

Die beiden am häufigsten verwendeten Bildschirmsprachausgaben, die unter Windows ausgeführt werden, sind Job Access With Speech (JAWS) von Vispero und NonVisual Desktop Access (NVDA) von NVAccess.

Hinweis: Der Autor dieses Lernpfads bevorzugt die Ausgabe des JAWS-Bildschirmlesers. Obwohl der Inhalt dieses Tutorials JAWS angibt, können Sie entweder JAWS oder NVDA verwenden.

JAWS verwenden

Mit einer Lebensdauer von mehr als zwanzig Jahren ist JAWS einer der ersten Screen-Reader, der in den Assistive-Technologie-Markt eintritt. Eine breite Palette von Stimmen, aus denen Sie wählen können, ermöglicht ein individuelleres Hörerlebnis. Die JAWS-Funktionalität unterstützt ARIA-Nachrichten (Accessible Rich Internet App) und komplexe Webstrukturen, und nach Ansicht des Autors ist sie oft robuster als andere Bildschirmsprachausgaben. JAWS bietet eine kostenlose 40-minütige Demozeit an, die für dieses Tutorial ausreichend ist.

Laden Sie das neueste JAWS-Release herunter, und installieren Sie es. Denken Sie immer daran, JAWS zu starten, bevor Sie Ihren Browser starten, um eine Validierung durchzuführen.

NVDA verwenden

NVDA ist kostenlos erhältlich. Es ist Open Source und wird von Python betrieben. Benutzer bevorzugen häufig die Stimmen, die mit NVDA verfügbar sind, und Head-to-Head-Reviews von JAWS und NVDA zeigen, dass NVDA Webseiten genauer liest. JAWS kann ein Label erraten und lesen, während NVDA ausschließlich aus Markup liest. Zwei Hauptmerkmale von NVDA sind der geringe Ressourcenbedarf und die Portabilität. Installieren Sie es auf einem Flash-Laufwerk, um die Software auf anderen Geräten auszuführen.

Laden Sie das neueste NVDA-Release herunter, und installieren Sie es.

Aufgabe 2: Validierung der Sprachausgabe vorbereiten

Es gibt mehrere WCAG 2.2-Erfolgskriterien, die sich mit der Bildschirmlesevalidierung befassen.

Alle Grafiken müssen Textlabels aufweisen. Wenn Alt-Text für eine Grafik bereitgestellt wird, sollte die Sprachausgabe den Alt-Text ankündigen.

Dieses Kriterium wurde im vorherigen Tutorial zur Visuellen Prüfung eingeführt, da Überschriften Teil der Seitenstruktur sind. Im Zusammenhang mit der Verwendung von Bildschirmsprachausgaben bezieht sich "Erfolgskriterium 1.3.1" auf das Zuordnen von Labels zu Steuerelementen und das Zuordnen von Zeilen- oder Spaltenüberschriften zu Datenzellen.

Wenn Sie eine Seite validieren, fragen Sie sich: Gibt die Sprachausgabe beim Verschieben von Zellen nach Zellen in einer Tabelle die Spalten- und Zeilenüberschriften sowie die Zellenkoordinaten und -inhalte an?

Die Sprachausgabe sollte den Namen, die Rolle, den Status und den Wert der Steuerelemente angeben, wenn diese fokussiert werden. Name ist das Label des Steuerelements. Rolle ist der Steuerelementtyp. Status definiert, ob das Steuerelement aktiviert, ausgewählt, eingeblendet oder ausgeblendet ist. Wert ist der tatsächliche Inhalt des Steuerelements.

Prüfen Sie, ob die Sprachausgabe den Linktext ankündigt, sobald er fokussiert wird. Stellen Sie sicher, dass der Text ausreicht, um den Zweck des Links zu identifizieren.

Der Text einer sichtbaren Beschriftung einer Komponente muss in den Etiketteninformationen enthalten sein, die zur Unterstützung der Technologie bereitgestellt werden. Wenn die Komponente ein aria-label-Attribut verwendet, muss der Text des Aria-Labels den Text des sichtbaren Labels enthalten, selbst wenn das sichtbare Label eine Grafik ist.

Die Sprachausgabe sollte alle Statusmeldungen ankündigen, die auf der Seite angezeigt werden. Die Meldungen benachrichtigen den Benutzer über eine Änderung der Seite oder über einen abgeschlossenen Prozess.

JAWS und NVDA können Material unterschiedlich darstellen, aber jede Bildschirmsprachausgabe muss bestimmte Informationen über die Elemente auf der Seite kommunizieren:

Aufgabe 3: Registerkarte "Mitarbeiter" mit JAWS validieren

Unabhängig davon, ob Sie JAWS oder NVDA verwenden, ist der Prozess der Screen-Reader-Validierung ähnlich. Ziel der Validierung ist es, sicherzustellen, dass Elemente der Seite korrekt gelesen werden. Der Prozess mag langweilig erscheinen, aber beide Bildschirmsprachausgaben verfügen über spezielle Tastenanschläge, mit denen Benutzer schneller durch eine Webanwendung navigieren können, indem sie Überschriften-, Link- oder Formularsteuerelemente verwenden.

Wenn Sie eine der beiden Bildschirmsprachausgaben verwenden, verwenden Sie eine Tastatur in voller Größe, da die Bildschirmsprachausgaben das Zahlenfeld auf der rechten Seite der Tastatur für spezielle Steuerelemente verwenden.

Verwenden Sie Ihre Sprachausgabe und die Start-App, um die Registerkarte "Mitarbeiter" der Einführungsseite zu validieren.

  1. Starten Sie JAWS oder NVDA.

    Es empfiehlt sich immer, die Sprachausgabe zu starten, bevor Sie den Browser öffnen. In dieser Übung wird sichergestellt, dass alle erforderlichen Verbindungen zwischen der Bildschirmsprachausgabe und dem Browser hergestellt werden.

  2. Starten Sie die Start-App.

    $ ojet serve

    Der Browser öffnet die Einführungsseite der App, und Sie können mit der Validierung beginnen.

    Beide Bildschirmsprachausgaben sollten mit dem Lesen beginnen, wenn die Seite vollständig geladen ist.

  3. Verwenden Sie in der laufenden App die Maus, um auf die Registerkarte Mitarbeiter zu klicken. Verwenden Sie nach diesem Schritt nicht die Maus.

    Registerkarte "Mitarbeiter"

  4. Drücken Sie <Ctrl+L>, um den Fokus auf der Adressleiste festzulegen.

  5. Drücken Sie <Tab>. JAWS sagt: "Zum Hauptinhalt wechseln. Gleicher Seitenlink."

  6. Drücken Sie <Tab>. JAWS liest: "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."

  7. Drücken Sie <Tab>. JAWS sagt: "Registerkarte "Navigationsbereich". Registerkarte "Einführung" ausgewählt. 1 von 2."

  8. Drücken Sie <Tab>. JAWS sagt: "Registerkarte Hauptregion. Registerkarte "Mitarbeiter" ausgewählt. 3 von 4."

  9. Drücken Sie <Tab>. JAWS sagt: "Tabelle mit 6 Spalten und mehr als 13 Zeilen…" Die Sprachausgabe liest weiterhin die Tabellenheader und -daten.

    Keine der beiden Screenreader enthält umfassende Informationen über die Tabellen.

    Erfolgskriterium 4.1.2 gibt an, dass Labels, die den Zweck identifizieren, einer Tabelle beigefügt werden müssen. Fügen Sie der Tabelle ein beschreibendes Label hinzu.

  10. Navigieren Sie zum Ordner ACCLearningPath/src/js/views, und öffnen Sie die Datei employees.html.

  11. Suchen Sie das Tag <oj-table>.

          
  <oj-table id="table"
     class="table-size"
     first-selected-row="{{selectedRow}}"
     . . .
  </oj-table>

  12. Ändern Sie das Tag so, dass es ein aria-label-Attribut enthält.

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

  13. Speichern und schließen Sie die Datei. Die Datei sollte ungefähr wie employees-html.txt aussehen

  14. Wiederholen Sie die Schritte 3 bis 9, um zu prüfen, ob aria-label jetzt vorgelesen wird, wenn die Tabelle fokussiert wird. Diese anfängliche <Tab> in der Tabelle fokussiert den ersten Spaltenheader, und JAWS sagt: "Tabelle mit 6 Spalten und mehr als 13 Zeilen. Mitarbeitertabelle Spaltenheader 1. Personalnummer."

  15. Drücken Sie <down arrow>. Der Fokus wird in die Tabellenzelle in Zeile 1, Spalte 1 verschoben. JAWS sagt: "Zeile 1.7839. Auswahl aufgehoben. Spalte 1. Personalnummer. 7839".

    Ein nicht deaktivierter Benutzer klickt auf eine beliebige Stelle in einer Zeile, um sie auszuwählen. Ein Benutzer nur mit einer Tastatur drückt jedoch die Leertaste, um die Zeile auszuwählen.

  16. Drücken Sie <right arrow>, um zur zweiten Spalte zu wechseln. JAWS: "Spalte 2. Benutzername König."

    Pfeiltasten drücken, um eine Zelle in Richtung der ausgewählten Pfeiltaste zu bewegen. JAWS sollte die neue Zeilen- oder Spaltennummer und den neuen Header lesen, je nachdem, ob die Bewegung vertikal oder horizontal in der Tabelle erfolgt. Beispiel: JAWS liest die Zeilennummer und den Wert der Spalte Mitarbeiternummer der Zeile, wenn die Tabelle vertikal navigiert wird.

  17. Drücken Sie erneut <right arrow>, um zur Spalte Titel zu wechseln. JAWS sagt: "Spalte 3. Titel Präsident."

  18. Drücken Sie <down arrow>. JAWS sagt: "Zeile 2.7698. Auswahl aufgehoben. Titelmanager."

Aufgabe 4: Bearbeiten von Tabellendaten validieren

  1. Drücken Sie in der aktiven App <Home>, um zur ersten Spalte und Zeile der Tabelle zu wechseln. Drücken Sie dann <Space>, um die Zeile auszuwählen, und drücken Sie <F2>, um die Zeile in den aktionsfähigen Modus umzuschalten.

    Wenn ein tabellarisches Element in der Tabelle vorhanden ist, wie z.B. die Schaltfläche "Bearbeiten" in der letzten Spalte der Zeile, wird durch Drücken von <F2> der Fokus auf das erste tabellarische Element verschoben. JAWS verschiebt den Fokus auf die Schaltfläche Bearbeiten und sagt: "Edit button. Zum Aktivieren drücken Sie die Eingabetaste."

  2. Klicken Sie auf <Enter>. JAWS öffnet das Formular "Mitarbeiter bearbeiten" und sagt: "Mitarbeiter bearbeiten". Mitarbeiter-ID: 7839…" JAWS liest weiterhin die Informationen des Mitarbeiters im Formular, bis eine Taste gedrückt wird.

    Seite "Mitarbeiter" mit Dialogfeld "Mitarbeiter bearbeiten"

  3. Drücken Sie <Tab>, um den Fokus in das Feld Name des Mitarbeiters zu verschieben. JAWS sagt: "Mitarbeitername bearbeiten. King. Text eingeben."

  4. Tippen Sie einen neuen Namen, und drücken Sie <Tab>. JAWS sagt: "Tätigkeitsbearbeitung. Präsident. Text eingeben."

  5. Drücken Sie <Tab>. JAWS sagt: "Einstellungsdatum schreibgeschützt bearbeiten. 16. Nov. 1981."

  6. Drücken Sie <Tab>. JAWS sagt: "Salary edit spinbox. 5.000. Geben Sie eine Zahl ein, die größer oder gleich 0 ist. Um den Wert festzulegen, verwenden Sie die Pfeiltasten oder geben den Wert ein."

  7. Drücken Sie <Tab>. JAWS sagt: "Save button. Zum Aktivieren drücken Sie die Eingabetaste."

  8. Klicken Sie auf <Enter>, um die Schaltfläche "Save" zu aktivieren. JAWS liest ähnliche Statusmeldungen zum Speichern: "Nachrichtenkategorie: Bestätigung. Aktualisierungen gespeichert. Die Änderungen für Mitarbeiter Onegin wurden gespeichert. Lernpfad für Barrierefreiheit." Screen-Reader-Benutzer müssen über Informationen informiert sein, die den Seitentitel, die Anzeige des Nachrichtenbereichs und die Bestätigung des Speichers betreffen. Schließen Sie das Nachrichtenfeld.

    Seite "Mitarbeiter" mit Bestätigungsmeldungsfeld

Aufgabe 5: Mit einem Bildschirmleser beschriftete Grafiken validieren

Sowohl JAWS als auch NVDA verfügen über eine Tastenkombination, um beschriftete Grafiken zu suchen. Drücken Sie <Shift+G>, um den Fokus zur nächsten beschrifteten Grafik auf der Seite zu verschieben. Das Oracle-Logo ist die einzige Grafik auf der Einführungsseite. Der Fokus liegt auf dem Logo, und JAWS sagt: "Oracle Logo Graphic".

Nächsten Schritt

In diesem Tutorial wird das Modul Barrierefreiheitsprobleme identifizieren in diesem Lernpfad zur Barrierefreiheit der Webanwendung abgeschlossen.

Sie können mit dem nächsten Tutorial im Lernpfad Verbundene Lebenszyklusereignisse anpassen im Modul Barrierefreiheit der Anwendung validieren und korrigieren fortfahren.

Sie können auch zur Hauptseite des Lernpfades 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.