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

Introducción

Esta será nuestra primera mirada al separador Departamentos de la aplicación ACCLearningPath. Se sigue el proceso de revisión descrito en la ruta de aprendizaje anterior de esta serie de accesibilidad 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 Oracle JET versión 13.0 (o posterior) instalada
Acceso al Oracle JET Developer Cookbook
Acceso a la Guía de gesto y teclado de Oracle JET
Finalización del tutorial anterior en esta ruta de aprendizaje, Verify the Accessibility of Oracle JET Components Table and Message

Tarea 1: Revisar la estructura de 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 el separador Departamentos de la barra de separadores y evalúe la estructura de la página. La página Departamentos consta de tres paneles, en los que cada panel muestra datos de departamento mediante varios componentes de Oracle JET.

Descripción de la ilustración departments_tab_before.png
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 Departamentos.

<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 central que contiene una tira de película.

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

Inserte un encabezado 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”
      . . . >

Localice 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"
      . . . >

Localice 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 de apertura <div> y <oj-chart>. 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 Departamentos de la aplicación.

Descripción de la ilustración departments_tab_after.png

Tarea 2: Realizar una prueba de solo teclado

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

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

Observe que el esquema central aparece alrededor de la celda que contiene el nombre de la ciudad.
Pulse <F2>. El esquema de enfoque se ajusta para rodear solo el texto New York en la celda.

Según la documentación del teclado del elemento <oj-data-grid>, utilice <F2> para hacer que el contenido de la celda sea accionable. La tecla de función <F2> permite iniciar acciones admitidas 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. Se abre una nueva ventana del navegador en una página de Google Maps en Nueva York.
Pulse <Ctrl+F4> para cerrar la ventana de Google Maps.
Pulse <Esc>. El esquema de enfoque se amplía para rodear la celda que contiene New 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.
Presione <Tab>. El enfoque se mueve a la primera barra del gráfico de barras.

La parte final 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 su aplicación web.
```
$ ojet serve
```
Tu app se abrirá en tu navegador automáticamente; el lector de pantalla comenzará a leer cuando la página esté completamente cargada.
Haga clic en el separador Departamentos de la barra de separadores. No utilice el mouse después de este punto.
Presione <Ctrl+L> para establecer el enfoque en la barra de direcciones.
Presione <Tab>. JAWS dice: "Omitir al contenido principal. El mismo enlace de página".
Presione <Tab>. JAWS dice: "Región de Banner. Barra de herramientas. Menú del botón john.hancock@oracle.com. Pulse la barra espaciadora para activar el menú y, a continuación, desplácese con las teclas de flecha".
Presione <Tab>. JAWS dice: "Separador Región de navegación. Separador de introducción seleccionado. 1 de 2."
Presione <Tab>. JAWS dice: "Separador 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 enfoque 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 las cabeceras de columna, el lector de pantalla lee las celdas de la tabla de la izquierda a la derecha. A continuación, lee el enfoque actual, "Row 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".
Presione <Tab>. JAWS dice: "Visualización de datos: gráfico. Gráfico. Serie: Contabilidad; Grupo: Departamento; Valor: USD 3,750.00. Gráfico".

Observe que a medida que el foco se mueve entre los paneles, JAWS no proporciona ninguna indicación de los encabezados del panel. Tampoco hay forma de desplazar el filme de una página a otra.
Abra el archivo departments.html en el editor de código.
- Nombre de criterio de éxito 4.1.2, Rol, Valor requiere que cada uno de los componentes de los tres paneles tenga una etiqueta asociada. Las cabeceras level-4 sirven como etiquetas visibles.
- Etiqueta de criterio de éxito 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 18 a 23 incorporarán el texto de cabecera para el panel.

Localice 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"
   . . . >

Localice 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]]"
   . . . >

Localice 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 depaginación para la tira de película en el panel medio.

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

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

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

      </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 hablan 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.

Ha completado el tutorial final en la serie de rutas de aprendizaje de accesibilidad de la aplicación.

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 Oracle Learning Explorer.

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

F34165-02

October 2022