Vernetzte Lebenszyklusereignisse anpassen

Einführung

Oracle JavaScript Extension Toolkit (JET)-Apps enthalten ein Lebenszyklusereignis, das jedes Mal ausgelöst wird, wenn eine Seite oder Registerkarte in den Browser geladen wird. Mit der Funktion this.connected() können Sie den Seitentitel so anpassen, dass er für die neu angezeigte Seite oder Registerkarte spezifisch ist. Die Funktion bietet auch die Möglichkeit, eine benutzerdefinierte Nachricht in den aria-live-Bereich zu schreiben, was dazu führt, dass eine Sprachausgabe ankündigt, dass die Seite oder Registerkarte geladen wurde.

Ziele

In diesem Tutorial erfahren Sie, wie Sie einen Titel für eine zugängliche Seite festlegen und die richtige Lademeldung für die aria-live-Region für jede Seite und Registerkarte bereitstellen, die in der ACCLearningPath-App angezeigt wird.

Voraussetzungen

Aufgabe 1: Anforderungen definieren

Gemäß WCAG Success Criterion 2.4.2 Page Titled muss jede Seite einer Web-App einen beschreibenden und eindeutigen Titel haben. Der Titel sollte die Seite, die Registerkarte und den App-Namen enthalten. Es gibt keine spezifische Anforderung für das Format des Titels, aber der Industriestandard besteht darin, die Seiten- und Registerkartennamen zuerst einzubeziehen, gefolgt vom App-Namen. Wenn der Titel in dieser Reihenfolge angeordnet ist, spricht die Sprachausgabe zuerst die wichtigsten und restriktivsten Informationen.

Auch wenn sich der Titel ändert, wenn eine neue Seite geladen wird, geben die Bildschirmsprachausgaben nicht immer an, dass sich die Seite geändert hat. Insbesondere in einer einseitigen App wie einer Oracle JET-App werden Seiten- und Tabulatoren ohne Benachrichtigung an die Sprachausgabe geladen. Um den Zugriff auf Oracle JET zu erleichtern, enthalten alle Apps, die mit den Oracle JET-Startvorlagen (Releaseversion 8.0.0 oder höher) erstellt wurden, die Funktion accUtils.announce(). Die Funktion schreibt Text in einen aria-live-Bereich, der immer im Document Object Model (DOM) vorhanden ist. Die Oracle JET-Vorlagen enthalten auch einen Aufruf der Methode accUtils.announce() innerhalb der Lebenszyklusfunktion this.connected. Der Text in diesem Aufruf gibt an, dass die Seite oder Registerkarte geladen wurde.

Aufgabe 2: Lebenszyklusfunktion this.connected anpassen

Die Funktion this.connected() in einer neu erstellten Oracle JET-App ist sehr präzise.

this.connected = function() {
      accUtils.announce("Dashboard page loaded.", "assertive");
      document.title = "Dashboard";
      // Implement further logic if needed
};

Der erste Parameter für die Methode accUtils.announce() ist der Text, der vorgelesen werden soll. Der zweite Parameter bestimmt, ob der Text sofort vorgelesen wird oder wartet, bis die Sprachausgabe andere Elemente in ihrem Puffer gesprochen hat.

  1. Navigieren Sie zum Ordner ACCLearningPath/src/js/viewModels, und öffnen Sie die Datei intro.js in einem Codeeditor.

  2. Suchen und ändern Sie die Funktion this.connected(). Speichern Sie die Datei, und schließen sie.

       this.connected = function () {
      accUtils.announce("Introduction page loaded.", "assertive");
      document.title = "Introduction -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  3. Öffnen Sie resources.js in einem Editor, und ändern Sie die zugehörige Funktion this.connected(). Speichern Sie die Datei und schließen sie.

       this.connected = function () {
      accUtils.announce("Resources page loaded.", "assertive");
      document.title = "Resources -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  4. Öffnen Sie overview.js in einem Editor, und ändern Sie die zugehörige Funktion this.connected(). Speichern Sie die Datei und schließen sie.

       this.connected = function () {
      accUtils.announce("Overview tab loaded.", "polite");
      document.title = "Introduction : Overview -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  5. Öffnen Sie organization.js in einem Editor, und ändern Sie die zugehörige Funktion this.connected(). Speichern Sie die Datei, und beenden Sie sie.

       this.connected = function () {
      accUtils.announce("Organization tab loaded.", "polite");
      document.title = "Introduction : Organization -- Accessibility Learning Path";
      // Implement further logic if needed
   };

  6. Öffnen Sie employees.js in einem Editor, und ändern Sie die zugehörige Funktion this.connected(). Speichern Sie die Datei, und beenden Sie sie.

       this.connected = function () {
         accUtils.announce("Employees tab loaded.", "polite");
         document.title = "Introduction : Employees  --  Accessibility Learning Path";
         // Implement further logic if needed
   };

  7. Öffnen Sie departments.js in einem Editor, und ändern Sie die zugehörige Funktion this.connected(). Speichern Sie die Datei, und beenden Sie sie.

       this.connected = function () {
         accUtils.announce("Departments tab loaded.", "polite");
         document.title = "Introduction : Departments  -- Accessibility Learning Path";
         // Implement further logic if needed
   };

  8. Starten Sie die Sprachausgabe.

  9. App ausführen.

       $ ojet serve

    Der Browser öffnet die Einführungsseite der App, wobei die Registerkarte Übersicht geladen ist.

  10. Stellen Sie sicher, dass der Titel "Introduction : Overview - Accessibility Learning Path" lautet und die Bildschirmsprachausgabe "Introduction page geladen" und "Overview tab geladen" angibt.

  11. Klicken Sie in der Registerkartenleiste auf die Registerkarte "Organisation".

  12. Stellen Sie sicher, dass der Titel "Introduction: Organization – Accessibility Learning Path" lautet und die Bildschirmsprachausgabe "Organization tab Loading" (Registerkarte "Organisation" geladen) angibt.

    Hinweis: Wenn die Bildschirmsprachausgabe den Seitentitel nicht erwähnt, versuchen Sie, mit der Tabulatortaste die Seite in Ihrem Browser zu öffnen und wieder aufzurufen.

  13. Prüfen Sie den Titel und die gesprochene Ankündigung für die restlichen Registerkarten und die Seite "Ressourcen".

  14. Bildschirmsprachausgabe stoppen

Die erste Aufgabe, eine App zugänglich zu machen, ist 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.

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.