Personalizar los eventos del ciclo de vida conectado

Introducción

Las aplicaciones de Oracle JavaScript Extension Toolkit (JET) contienen un evento de ciclo de vida que se dispara cada vez que se carga una página o un separador en el explorador. La función this.connected() ofrece la oportunidad de personalizar el título de la página para que sea específico de la página o separador que se acaba de mostrar. La función también ofrece la oportunidad de escribir un mensaje personalizado en la región aria-live, lo que hará que un lector de pantalla anuncie que la página o el separador se han cargado.

Objetivos

En este tutorial, aprenderá a definir un título de página accesible y a proporcionar el mensaje de carga correcto a la región aria-live para cada página y separador que se muestra en la aplicación ACCLearningPath.

Requisitos

Tarea 1: Definición de los Requisitos

Según WCAG Success Criterion 2.4.2 Page Titled, cada página de una aplicación web debe tener un título descriptivo y único. El título debe incluir el nombre de la página, la pestaña y la aplicación. No hay ningún requisito específico para el formato del título, pero el estándar de la industria es incluir primero los nombres de página y pestaña, seguidos por el nombre de la aplicación. Cuando el título está organizado en este orden, el lector de pantalla habla primero la información más importante y restrictiva.

A pesar de que el título cambia cuando se carga una nueva página, los lectores de pantalla no siempre anuncian que la página ha cambiado. Especialmente en una aplicación de una sola página, como una aplicación de Oracle JET, las cargas de páginas y separadores se producen sin notificación al lector de pantalla. Para que Oracle JET sea más accesible, todas las aplicaciones creadas mediante las plantillas de inicio de Oracle JET (versión 8.0.0 o posterior) contienen la función accUtils.announce(). La función escribe texto en una región aria-live, que siempre está presente en el modelo de objetos de documento (DOM). Las plantillas de Oracle JET también incluyen una llamada al método accUtils.announce() dentro de la función de ciclo de vida this.connected. El texto de esta visita indica que la página o el separador se han cargado.

Tarea 2: Personalización de la función de ciclo de vida this.connected

La función this.connected() en una aplicación de Oracle JET recién creada es muy concisa.

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

El primer parámetro del método accUtils.announce() es el texto que se va a hablar. El segundo parámetro determina si el texto se hablará inmediatamente o esperará hasta que el lector de pantalla haya terminado de hablar otros elementos en su buffer.

  1. Vaya a la carpeta ACCLearningPath/src/js/viewModels y abra el archivo intro.js en un editor de código.

  2. Busque y modifique la función this.connected(). Luego, guarde y cierre el archivo.

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

  3. Abra resources.js en un editor y modifique su función this.connected(). Luego, guarde y cierre el archivo.

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

  4. Abra overview.js en un editor y modifique su función this.connected(). Luego, guarde y cierre el archivo.

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

  5. Abra organization.js en un editor y modifique su función this.connected(). Luego, guarde y cierre el archivo.

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

  6. Abra employees.js en un editor y modifique su función this.connected(). Luego, guarde y cierre el archivo.

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

  7. Abra departments.js en un editor y modifique su función this.connected(). Luego, guarde y cierre el archivo.

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

  8. Inicie el lector de pantalla.

  9. Ejecución de la aplicación

       $ ojet serve

    El explorador se abre en la página Introducción de la aplicación, con el separador Visión general cargado.

  10. Compruebe que el título es "Introduction : Overview – Accessibility Learning Path" y que el lector de pantalla dice "Introduction pageloaded" y "Overview tabloaded".

  11. Haga clic en el separador Organization de la barra de separadores.

  12. Compruebe que el título es "Introduction : Organization – Accessibility Learning Path" y que el lector de pantalla indica que se ha cargado el separador Organization".

    Nota: Si el lector de pantalla no menciona el título de la página, intente salir y volver a la página en el explorador.

  13. Verifique el título y el anuncio hablado para el resto de separadores y para la página Resources.

  14. Detén el lector de pantalla.

La tarea inicial de hacer que una aplicación sea accesible está completa.

Siguiente paso

Continúe con el siguiente tutorial de este módulo.

Este tutorial forma parte del módulo Validar y corregir accesibilidad de la aplicación.

Puede volver a la página principal de la ruta de aprendizaje de accesibilidad para acceder a todos los módulos sobre accesibilidad.

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en un explorador de Oracle Learning.

Para obtener documentación sobre el producto, visite Oracle Help Center.