Probar la navegación del teclado en componentes complejos de Oracle JET

Introducción

Este será nuestro primer vistazo al separador Departamentos en la aplicación ACCLearningPath. El proceso de revisión descrito en la ruta de aprendizaje anterior en esta serie de accesibilidad se sigue para identificar cualquier problema de accesibilidad.

Objetivos

En este tutorial, aprenderá a identificar y corregir los problemas de accesibilidad en el separador Departamentos de la aplicación ACCLearningPath.

Requisitos

Un entorno de desarrollo configurado para crear aplicaciones Oracle JET con el tiempo de ejecución JavaScript, Node.js y la interfaz de línea de comandos de la versión 13.0 (o posterior) de Oracle JET instalada
Acceso al Cuaderno de recomendaciones para desarrolladores de Oracle JET
Acceso a la Guía de gestos y teclado de Oracle JET
Finalización del tutorial anterior en esta ruta de aprendizaje, Verificación de la accesibilidad de la tabla y el mensaje de componentes de Oracle JET

Tarea 1: Revisar la estructura de la página

En la ventana de terminal, vaya a la carpeta ACCLearningPath y ejecute la aplicación.
```
$ ojet serve
```
La aplicación del explorador se abrirá en la página Introducción con el separador Visión general cargado.
Haga clic en la ficha Departamentos de la barra de separadores y evalúe la estructura de la página. La página Departments consta de tres paneles, en los que cada panel muestra datos de departamento mediante varios componentes de Oracle JET.
Vaya a la carpeta ACCLearningPath/src/js/views y abra el archivo departments.html en un editor de código.

Busque la etiqueta <div> principal en el archivo.

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Inserte una cabecera h3 entre las dos etiquetas <div> para identificar la página Departments.

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Localice la etiqueta <div> que define el panel medio que contiene una tira de imágenes.

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

Inserte una cabecera h4 entre las etiquetas <div> y <oj-filmstrip> de apertura para identificar el panel y proporcionar una etiqueta visible para la tira de imágenes.

<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

Busque la etiqueta <div> que forma el panel izquierdo que contiene una cuadrícula de datos.

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Inserte una cabecera h4 entre las etiquetas <div> y <oj-data-grid> para identificar el panel y proporcionar una etiqueta visible para la cuadrícula de datos.

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Busque la etiqueta <div> de apertura que forma el tercer panel que contiene un gráfico.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
        . . . >

Inserte una cabecera h4 entre las etiquetas <div> y <oj-chart> iniciales. Este encabezado identifica el panel y sirve como etiqueta visual para el gráfico.

  <div class="oj-flex-item oj-sm-margin-4x-horizontal">
     <h4>Salaries by Department</h4>
     <oj-chart id="pieChart"
        type="bar"
        data="[[chartDataProvider]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        . . . >

Guarde el archivo. En el explorador, verifique los cambios en el separador Departments de la aplicación.

Tarea 2: Realizar una prueba de solo teclado

La segunda parte de la revisión de accesibilidad es realizar una prueba de solo teclado de la ficha Departamentos de la aplicación.

Pulse <Ctrl+L> para fijar el foco en la barra de direcciones.
Pulse <Tab>. El foco se mueve al enlace de omisión de navegación.
Pulse <Tab>. Focus pasa a john.hancock@oracle.com en el menú de usuario situado en la parte superior derecha de la página.
Pulse <Tab>. Focus pasa a Introduction (Introducción) en el menú de navegación inmediatamente debajo del menú de usuario.
Pulse <Tab>. El foco se mueve a Visión general en la barra de separadores.
Pulse <Tab>. El foco se mueve a Contabilidad en la tira de imágenes.
Pulse <right arrow> para pasar a la siguiente entrada, Research, en la tira de imágenes.
Pulse <left arrow> para volver a Contabilidad en la tira de imágenes.
Pulse <right arrow> tres veces. Focus se mueve a la última entrada de la tira de imágenes, Operations (Operaciones).
Pulse <Tab>. El foco se mueve a la primera celda del cuerpo de datos de la cuadrícula de datos, en la columna Id. El valor de la celda enfocada es 10.
Pulse <right arrow>. Focus se mueve a Accounting en la segunda columna de la cuadrícula de datos, Name.
Pulse <right arrow>. Focus se mueve a Nueva York en la columna final de la cuadrícula de datos, Ubicación.

Observe que el contorno del foco aparece alrededor de la celda que contiene el nombre de la ciudad.
Pulse <F2>. El contorno del foco se ajusta para rodear solo el texto Nueva York en la celda.

Según la documentación del teclado del elemento <oj-data-grid>, utilice <F2> para que el contenido de la celda sea accionable. La clave de función <F2> permite iniciar acciones soportadas por el componente activo. En este caso, la celda contiene un enlace a Google Maps que activará.
Pulse <Enter> para activar el enlace Nueva York. Una nueva ventana del navegador se abre a una página de Google Maps de Nueva York.
Pulse <Ctrl+F4> para cerrar la ventana de Google Maps.
Pulse <Esc>. El contorno del foco se amplía para rodear la celda que contiene Nueva York en la tercera columna.

Según la documentación del teclado del elemento <oj-data-grid>, utilice <Esc> para salir del modo accionable, de modo que pueda seguir navegando a otros componentes.
Pulse <Tab>. El foco se mueve a la primera barra del gráfico de barras.

La última parte de la revisión de accesibilidad es la validación del lector de pantalla. Los siguientes pasos de validación se basan en el uso del lector de pantalla JAWS, pero los resultados serán similares si utiliza el lector de pantalla NVDA.

En la ventana de terminal, salga de la aplicación en ejecución pulsando <Ctrl+C> y, si se le solicita, introduzca y.
Inicie el lector de pantalla y, a continuación, reinicie la aplicación web.
```
$ ojet serve
```
Tu aplicación se abrirá en tu navegador automáticamente; el lector de pantalla comenzará a leer una vez que la página esté completamente cargada.
Haga clic en el separador Departments de la barra de separadores. No utilice el mouse después de este punto.
Pulse <Ctrl+L> para establecer el foco en la barra de direcciones.
Pulse <Tab>. JAWS dice: "Omitir en contenido importante. El mismo enlace de página".
Pulse <Tab>. JAWS dice: "Región Banner. Barra de herramientas. Menú del botón john.hancock@oracle.com. Presione el espacio para activar el menú y, a continuación, navegue con las teclas de flecha.
Pulse <Tab>. JAWS dice: "Separador de región de navegación. Se ha seleccionado la pestaña Introducción. 1 de 2."
Pulse <Tab>. JAWS dice: "Separador de región principal. Separador Departamentos seleccionado. 4 de 4."
Pulse <Tab> para mover el foco a la tira de película. JAWS dice: "Contabilidad. Nueva York. 3 empleados. Mostrando página 1 de 4."
Pulse <Tab> para mover el foco a la cuadrícula de datos. JAWS dice: "Esta es una cuadrícula de datos con 4 filas y 3 columnas. ID. Nombre Ubicación." Después de leer los encabezados de columna, el lector de pantalla lee las celdas del cuerpo de datos de la tabla de izquierda a derecha. Luego lee el enfoque actual, "Fila 1. Columna 1. ID: 10.".
Pulse <right arrow>. JAWS dice: "Columna 2. Nombre: Contabilidad."
Pulse <right arrow>. JAWS dice: "Columna 3. Ubicación: Nueva York. Contiene controles Ha llegado a la última columna".
Pulse <Tab>. JAWS dice: "Visualización de datos: gráfico. Gráfico. Serie: Contabilidad; Grupo: Departamento; Valor: 3.750,00 USD. Gráfico".

Observe que a medida que el foco se mueve entre los paneles, JAWS no indica los encabezados de los paneles. Tampoco hay forma de desplazar la tira de películas de una página a otra.
Abra el archivo departments.html en el editor de código.
- Success Criterion 4.1.2 Name, Role, Value (Nombre, rol y valor de criterio de sucesión) requiere que cada uno de los componentes de los tres paneles tenga una etiqueta asociada. Los encabezados de nivel 4 sirven como etiquetas visibles.
- Etiqueta del criterio de sucesión 2.5.3 en nombre requiere que todo el texto de la cabecera se incluya en la etiqueta. Los atributos aria-label agregados en los siguientes pasos del 18 al 23 incorporarán el texto de cabecera del panel.

Busque la etiqueta <oj-film-strip> de apertura y agregue un atributo aria-label.

  <oj-film-strip id="deptFilmstrip"
     max-items-per-page="1"
     aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
     arrow-visibility="hidden"
     class="demo-stretch-items"
     . . . >

Busque la etiqueta <oj-data-grid> de apertura y agregue un atributo aria-label.

  <oj-data-grid id="datagrid"
     style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
     aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
     data="[[dgDataProvider]]"
     header.column.style="[[getCellWidth]]"
     . . . >

Busque la etiqueta <oj-chart> de apertura y agregue un atributo aria-label.

  <oj-chart id="pieChart"
     type="bar"
     aria-label="Salaries by Department bar chart"
     data="[[chartDataProvider]]"
     animation-on-display="auto"
     animation-on-data-change="auto"
     . . . >

El cambio final implica los controles de paginación para la tira de imágenes en el panel medio.

Busque las etiquetas </oj-film-strip> y </oj-bind-if> de cierre.

        </oj-film-strip>
     </div>
  </div>
  </oj-bind-if>

Agregue el control de paginación y los elementos div circundantes entre las etiquetas </div> y </oj-bind-if> de cierre.

        </oj-film-strip>
     </div>
  </div>
  <div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
     <div class="oj-flex-item">
        <div style="text-align: center;">
        <div style="display: inline-block;margin-top: 4px;">
           <oj-paging-control id="pagingControl"
              aria-controls="deptFilmstrip"
              data="[[pagingModel]]"
              page-size="0"
              page-options='{"type": "dots"}'>
           </oj-paging-control>
        </div>
        </div>
     </div>
  </div>
  </oj-bind-if>

Guarde el archivo. El archivo debe tener un aspecto similar a departments-html.txt.
Vuelva a ejecutar la validación del lector de pantalla. Asegúrese de que las etiquetas se hablen para la tira de imágenes, la cuadrícula de datos y el gráfico, y de que los controles de paginación estén presentes debajo de la tira de imágenes.

Siguiente paso

En este tutorial se concluye el módulo Validar y corregir la accesibilidad de la aplicación en esta ruta de aprendizaje sobre la accesibilidad de la aplicación web.

Personalizar los eventos del ciclo de vida conectado
Validación de la Accesibilidad de Vistas de Detalles Maestros en una Aplicación Oracle JET
Verificación de la Accesibilidad de la Tabla y el Mensaje de Componentes de Oracle JET
Prueba de la navegación del teclado en componentes complejos de Oracle JET

Puede volver a la página principal de la ruta de aprendizaje de accesibilidad para acceder a todos los módulos de accesibilidad, así como a otras rutas de aprendizaje.

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.

Título e Información de Copyright

Test keyboard navigation in complex Oracle JET components

F58360-02

Oracle y/o sus filiales.