Personalizza 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() offre l'opportunità di personalizzare il titolo della pagina in modo che sia specifico della pagina o della scheda appena visualizzata. La funzione offre anche l'opportunità di scrivere un messaggio personalizzato nell'area aria-live, il che farà sì 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 nell'area aria-live per ogni pagina e scheda visualizzati nell'applicazione ACCLearningPath.

Prerequisiti

Task 1: Definizione dei requisiti

Secondo WCAG Success Criterion 2.4.2 Page Titled, ogni pagina di un'applicazione Web deve avere un titolo descrittivo e univoco. Il titolo dovrebbe includere la pagina, la scheda e il nome dell'app. Non esiste un requisito specifico per il formato del titolo, ma lo standard del 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. Per rendere Oracle JET più accessibile, tutte le applicazioni create utilizzando i modelli iniziali di Oracle JET (release versione 8.0.0 o successiva) contengono la funzione accUtils.announce(). La funzione scrive il testo in un'area aria-live, che è sempre presente nel modello di 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'app 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 di schermo abbia terminato di parlare di altri elementi nel relativo 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(). 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(). 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(). 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(). 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(). 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(). 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 di 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'accessibilità" 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 accessibilità" e che il lettore di schermo indichi "Scheda Organizzazione caricata".

    Nota: se il lettore di schermo non menziona il titolo della pagina, provare a eseguire il tabulazione e tornare alla pagina nel browser.

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

  14. Arrestare il lettore di schermo.

Il compito iniziale di rendere un'app accessibile è completo.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Convalida e correzione dell'accesso facilitato alle applicazioni.

È possibile tornare alla pagina principale del percorso di apprendimento per l'accesso facilitato per accedere a tutti i moduli sull'accesso facilitato.

Altre risorse di apprendimento

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

Per la documentazione del prodotto, visitare Oracle Help Center.