Personalizzare gli eventi del ciclo di vita connesso

Introduzione

Le applicazioni Oracle JavaScript Extension Toolkit (JET) contengono un evento del ciclo di vita che viene attivato ogni volta che una pagina o una scheda viene caricata nel browser. La funzione this.connected() consente di personalizzare il titolo della pagina in modo specifico per la pagina o la scheda appena visualizzata. La funzione consente inoltre di scrivere un messaggio personalizzato nell'area aria-live, in modo che un lettore di schermo annunci che la pagina o la scheda è stata caricata.

Obiettivi

In questa esercitazione verrà descritto come impostare un titolo di pagina accessibile e fornire il messaggio di caricamento corretto all'area aria-live per ogni pagina e scheda visualizzata nell'app ACCLearningPath.

Prerequisiti

Task 1: Definizione dei requisiti

Secondo quanto riportato in WCAG Success Criterion 2.4.2 Page Titled, ogni pagina di un'applicazione Web deve avere un titolo descrittivo e univoco. Il titolo deve includere la pagina, la scheda e il nome dell'applicazione. Non esiste un requisito specifico per il formato del titolo, ma lo standard di settore prevede di includere prima i nomi delle pagine e delle schede, seguiti dal nome dell'applicazione. Quando il titolo è organizzato in questo ordine, il lettore di schermo parla prima le informazioni più importanti e restrittive.

Anche se il titolo cambia quando viene caricata una nuova pagina, i lettori di schermo non sempre annunciano che la pagina è cambiata. Soprattutto in un'applicazione a pagina singola come un'applicazione Oracle JET, i caricamenti di pagine e schede vengono eseguiti senza notifica al lettore di schermo. Nel tentativo di rendere Oracle JET più accessibile, tutte le applicazioni create utilizzando i modelli iniziali di Oracle JET (versione 8.0.0 o successiva) contengono la funzione accUtils.announce(). La funzione scrive il testo in un'area aria-live, sempre presente nel modello oggetto documento (DOM). I modelli Oracle JET includono anche una chiamata al metodo accUtils.announce() all'interno della funzione del ciclo di vita this.connected. Il testo della chiamata indica che la pagina o la scheda è stata caricata.

Task 2: Personalizzare la funzione del ciclo di vita this.connected

La funzione this.connected() in un'applicazione Oracle JET appena creata è molto concisa.

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

Il primo parametro del metodo accUtils.announce() è il testo da pronunciare. Il secondo parametro determina se il testo verrà pronunciato immediatamente o attendere che il lettore dello schermo abbia terminato di parlare altri elementi nel buffer.

  1. Passare alla cartella ACCLearningPath/src/js/viewModels e aprire il file intro.js in un editor di codice.

  2. Trovare e modificare la funzione this.connected(). Quindi salvare e chiudere il file.

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

  3. Aprire resources.js in un editor e modificarne la funzione this.connected(). Quindi salvare e chiudere il file.

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

  4. Aprire overview.js in un editor e modificarne la funzione this.connected(). Quindi salvare e chiudere il file.

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

  5. Aprire organization.js in un editor e modificarne la funzione this.connected(). Quindi salvare e chiudere il file.

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

  6. Aprire employees.js in un editor e modificarne la funzione this.connected(). Quindi salvare e chiudere il file.

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

  7. Aprire departments.js in un editor e modificarne la funzione this.connected(). Quindi salvare e chiudere il file.

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

  8. Avviare il lettore dello schermo.

  9. Eseguire l'applicazione.

    $ ojet serve

    Il browser si apre alla pagina Introduzione dell'app, con la scheda Panoramica caricata.

  10. Verificare che il titolo sia "Introduzione: Panoramica - Percorso di apprendimento per l'accesso facilitato" e che il lettore di schermo indichi "Pagina di introduzione caricata" e "Scheda Panoramica caricata".

  11. Fare clic sulla scheda Organizzazione nella barra delle schede.

  12. Verificare che il titolo sia "Introduzione: Organizzazione - Percorso di apprendimento accesso facilitato" e che il lettore di schermo indichi "Scheda Organizzazione caricata".

    Nota: se il lettore di schermo non fa riferimento al titolo della pagina, provare a tornare alla pagina del browser.

  13. Verificare il titolo e l'annuncio parlato per le schede rimanenti e per la pagina Risorse.

  14. Arresta il lettore di schermo.

L'attività iniziale di rendere accessibile un'applicazione è completata. L'esercitazione successiva all'interno di questo percorso di apprendimento è Convalida accesso facilitato delle viste Master-Detail.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o visita altri contenuti di formazione gratuiti sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare un Oracle Learning Explorer.

Per la documentazione sul prodotto, visitare Oracle Help Center.