Verificación de la Accesibilidad de la Tabla y el Mensaje de Componentes de Oracle JET

Introducción

En el tutorial Realización de la validación del lector de pantalla en una aplicación de Oracle JET, abordamos varios problemas de accesibilidad en la página Empleados. Hay varios problemas que nos quedan que trataremos en este tutorial.

Objetivos

En este tutorial, aprenderá a identificar y corregir los problemas de accesibilidad restantes en la página Empleados 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, Validación de la accesibilidad de las vistas de detalle maestras en una aplicación de Oracle JET

Tarea 1: Verificar estructura de página

El primer paso de la revisión es asegurarse de que todas las cabeceras HTML necesarias están presentes en la página.

Navegue al directorio ACCLearningPath en el terminal y ejecute la aplicación.
```
$ ojet serve
```
El explorador se abrirá en la página Introducción de la aplicación con el separador Visión general cargado. Haga clic en la ficha Empleados de la barra de separadores e inspeccione la página Empleados.

La página Empleados consta de dos paneles. Faltan las cabeceras HTML de la página en sí y de cada panel.
Vaya a la carpeta ACCLearningPath/src/js/views y abra el archivo employees.html en un editor.

Busque la primera etiqueta <div> de apertura en el archivo.

<div class="oj-hybrid-padding">
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Inmediatamente después de la etiqueta <div> de apertura, inserte una cabecera h3 para identificar la página Employees.

<div class="oj-hybrid-padding">
   <h3>Employees</h3>
   <oj-messages id="messagesId"
      messages="[[messagesDataprovider]]"
      display="notification"
      position="[[positionObject]]">
   </oj-messages>

Busque la etiqueta <div> de apertura que forma el panel izquierdo que contiene una tabla.

   
<div class="oj-flex-item">
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Entre las etiquetas <div> y <oj-table> de apertura, inserte una cabecera h4 para etiquetar correctamente este panel.

   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table"
      . . . >
   

Edite el atributo aria-label del elemento <oj-table> para incluir tanto el texto de cabecera como el texto instructivo que se muestra en el segundo panel.
```
   
<div class="oj-flex-item">
   <h4>Employees Table</h4>
   <oj-table id='table'
      class="table-size"
      first-selected-row="{{selectedRow}}"
      aria-label="Employees Table - Activate a row to see employee details"
      . . . >
   
```
La tabla ahora se adhiere tanto a la etiqueta WCAG Success Criterion 2.5.3 en Name como a la WCAG Success Criterion 1.3.1 Info and Relationships. Para cumplir con estos criterios, tanto la etiqueta visual como el texto instructivo del panel derecho deben incluirse en la etiqueta hablada de un control.

Busque la etiqueta <div> de apertura que define el panel derecho de la página Empleados que contendrá los detalles del empleado.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <oj-bind-if test="[[!activeRow()]]">

Entre las etiquetas <div> y <oj-bind-if>, inserte una cabecera h4 debajo de la regla horizontal que identificará este panel.

<div id="detailContainer"
   class="oj-flex-item"
   style="margin-left: 30px; min-width: 200px">
   <hr style="margin-top:12px;">
   <h4>Employee Details</h4>
   <oj-bind-if test="[[!activeRow()]]">

Guarde el archivo. El archivo debe tener un aspecto similar a employees-page-html.txt.
Verifique los cambios aplicados en la aplicación en ejecución.

Tarea 2: Realizar una prueba de solo teclado

Esta sección y la siguiente parte de Realización de una Prueba de Lector de Pantalla de este tutorial se deben realizar sin utilizar el mouse. Durante esta prueba, asegúrese de que el punto de enfoque esté siempre claramente identificado y de que el orden de las fichas sea predecible.

En la página Employees, pulse <Ctrl+L> para establecer 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 principal inmediatamente debajo del menú de usuario.
Pulse <Tab>. El foco se mueve a Visión general en la barra de separadores.
Pulse <Tab>. Focus se mueve a la primera cabecera de columna, Employee Number (Número de empleado), en la tabla Employees.
Pulse <down arrow> para centrar la atención en la primera fila de datos de la tabla.

El formulario Detalles de empleado debe aparecer en el panel de la parte derecha de la página.
Pulse <Space> para seleccionar la fila y, a continuación, pulse <F2> para mover el foco al primer elemento de tabulación, el botón Editar.
Pulse <Space> para activar el botón Editar. Se abre un cuadro de diálogo Editar empleado y el foco se mueve al campo ID de empleado.
Pulse <Tab>. Focus pasa al campo Employee Name (Nombre del empleado).
Pulse <Tab>. Focus se mueve al campo Job Title (Título del puesto).
Pulse <Tab>. El foco se mueve al campo Fecha de contratación.
Pulse <Tab>. Focus se mueve al campo Salary (Salario).
Pulse <Tab>. Focus se mueve al botón Save (Guardar).
Pulse <Space> para activar el botón Save (Guardar) y cerrar el cuadro de diálogo. Focus vuelve a la primera fila de datos seleccionada de la tabla de empleados.

Observe el cuadro de mensaje en la esquina superior izquierda de la página. El cuadro de mensaje proporciona confirmación de que se guardaron las actualizaciones.

El software de ampliación de pantalla se centra en la tabla de empleados, por lo que el mensaje de confirmación puede estar fuera de la ventana de visualización de la lupa.
Vaya a la carpeta ACCLearningPath/src/js/viewModels y edite employees.js.

Localice la definición de this.positionObject.

  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "window",
  };

Modifique la definición positionObject para que la ubicación del objeto se base en la tabla en lugar de en la ventana.
```
  this.positionObject = {
     my: { vertical: "top", horizontal: "start" },
     at: { vertical: "top", horizontal: "start" },
     of: "#table",
  };
```
Guarde el archivo. A continuación, repita los pasos del 1 al 15 de la prueba de solo teclado para verificar que la ubicación del mensaje de confirmación se haya movido a la tabla.

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 la ficha Empleados de la barra de fichas. 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 al contenido main. 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. Se seleccionó el separador Empleados. 3 de 4".
Pulse <Tab>. JAWS dice: "Tabla con 6 columnas y más de 13 filas. Tabla de empleados: active una fila para ver los detalles del empleado. Cabecera de columna 1, número de empleado". El foco se mueve a la primera celda de la fila de cabeceras de columna de tabla.
Pulse <down arrow>. JAWS dice: "Fila 1: 7839. No seleccionado. Columna 1, Número de empleado: 7839." El foco está en la primera fila de datos de la tabla.
Pulse <right arrow>. JAWS indica el número de columna y el nombre de usuario del empleado.
Pulse <Space>. La fila está seleccionada y JAWS dice: "Espacio. Seleccionado."
Pulse <F2> para pasar al primer elemento que se puede tabular. JAWS dice: "Botón Editar. Para activar, pulse Intro."
Pulse <Enter>. JAWS dice: "Edite el empleado. Editar empleados. ID de empleado 7.839…" El lector de pantalla abre el cuadro de diálogo Editar empleado y continuará leyendo hasta que se pulse una tecla.
Pulse <Tab> cinco veces para desplazarse por los campos editables y de solo lectura hasta el botón Guardar. JAWS dice: "Botón Guardar. Para activar, pulse Intro."
Pulse <Enter>. JAWS dice: "Categoría de mensaje: confirmación. Actualizaciones guardadas. Los cambios para el empleado Onegin se han guardado". El nombre de usuario del empleado en la aplicación puede diferir aquí, debido a las ediciones realizadas en un tutorial anterior.
Pulse <F6> para leer el contenido del cuadro de mensajes. JAWS dice: "Región complementaria de mensajes. Actualizaciones guardadas. Introducción de la región de mensajes. Pulse F6 para volver al elemento enfocado anterior.
Pulse <Tab>. JAWS dice: "Botón Cerrar. Para activar, pulse Intro."
Pulse <Enter> para cerrar el cuadro de mensaje. El foco vuelve a la tabla y a la celda seleccionada anterior.
Detén el lector de pantalla.
En la ventana de terminal, salga de la aplicación pulsando <Ctrl+C> y, si se le solicita, introduzca y.

Esto completa el tercer juego de correcciones de accesibilidad.

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.

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

Título e Información de Copyright

Verify the accessibility of Oracle JET components table and message

F58364-02

Oracle y/o sus filiales.