Realizar validación de lector de pantalla en una aplicación Oracle JET

Introducción

Cuando usamos un lector de pantalla con una aplicación web, usamos el término validación en lugar de la palabra prueba. Hay una respuesta definitiva con una prueba; la validación implica más de una respuesta correcta. El resultado de la validación cambia ligeramente a medida que cambian las versiones del explorador y del lector de pantalla.

Las Directrices de accesibilidad de contenido web (WCAG) 2.1 contienen un conjunto de más de sesenta criterios de éxito para crear una aplicación web accesible. En este tutorial, nos centraremos en un subconjunto de estos criterios que tratan exclusivamente con el uso de un lector de pantalla para navegar por una aplicación.

Lo ideal es realizar una revisión del lector de pantalla de una aplicación sin utilizar el mouse y con la pantalla desactivada o cubierta.

Aprenda a confiar en la salida hablada del lector de pantalla en lugar de en lo que está sucediendo visualmente en la pantalla. Lo que se ve y se escucha puede ser drásticamente diferente. Tenga en cuenta que escuchar a los lectores de pantalla puede suponer un desafío para aquellos que no están familiarizados con ellos.

Objetivos

En este tutorial, aprenderá a validar una aplicación web con un lector de pantalla y a familiarizarse con las voces del lector de pantalla.

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
Explorador web de Google Chrome instalado y configurado como explorador web predeterminado
Acceso a las Directrices de accesibilidad de contenido web 2.1
Acceso a la Guía de gesto y teclado de Oracle JET
Finalización del tutorial anterior en esta ruta de aprendizaje, Prueba de una aplicación Oracle JET para accesibilidad de solo teclado

Los dos lectores de pantalla más utilizados que se ejecutan en Windows son Job Access With Speech (JAWS) de Vispero y NonVisual Desktop Access (NVDA) de NVAccess.

Nota: el autor de esta ruta de aprendizaje prefiere la salida del lector de pantalla de JAWS. Aunque el contenido de este tutorial especifica JAWS, no dude en utilizar JAWS o NVDA.

Usar JAWS

Con una vida útil de más de veinte años, JAWS es uno de los primeros lectores de pantalla en entrar en el mercado de la tecnología de asistencia. Una amplia gama de voces entre las que elegir permite una experiencia de escucha más personalizada. La funcionalidad JAWS soporta mensajes ARIA (Aplicación de Internet enriquecida accesible) y estructuras web complejas, y en opinión del autor, suele ser más robusta que otros lectores de pantalla. JAWS ofrece un período de demostración de 40 minutos de forma gratuita, que es suficiente para este tutorial.

Descargue la última versión de JAWS e instálela. Recuerde siempre iniciar JAWS antes de iniciar el explorador para realizar la validación.

Usar NVDA

NVDA está disponible sin cargo. Tiene código abierto y tecnología de Python. Los usuarios suelen preferir las voces disponibles con NVDA, y las revisiones de JAWS y NVDA revelan que NVDA lee con mayor precisión las páginas web. JAWS puede adivinar leer una etiqueta, mientras que NVDA lee estrictamente desde el marcado. Dos características principales de la NVDA son sus pequeños requisitos de recursos y su portabilidad. Instálelo en una unidad flash para ejecutar el software en otros dispositivos.

Descargue la última versión de NVDA e instálela.

Hay varios criterios de éxito de WCAG 2.1 que abordan la validación del lector de pantalla.

El contenido no textual del criterio de éxito 1.1.1 indica: "Todo el contenido no textual que se presenta al usuario tiene una alternativa de texto"

Todos los gráficos deben tener etiquetas de texto. Si se proporciona texto alternativo para un gráfico, el lector de pantalla debe anunciar el texto alternativo.

En el Criterio de éxito 1.3.1 Información y relaciones se indica lo siguiente: "La información, la estructura y las relaciones transmitidas a través de la presentación se pueden determinar mediante programación o están disponibles en texto".

Este criterio se introdujo en el tutorial anterior de Visual Inspection porque las cabeceras forman parte de la estructura de página. En el contexto de la utilización de lectores de pantalla, el criterio de éxito 1.3.1 hace referencia a la asociación de etiquetas con controles y a la asociación de cabeceras de fila o columna con celdas de datos.

Cuando valida una página, pregúntese: Al mover celda por celda en una tabla, ¿el lector de pantalla anuncia las cabeceras de columna y fila junto con las coordenadas y el contenido de la celda?

Criterio de éxito 4.1.2 Nombre, rol, valor indica: "Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y el rol pueden: se determinen mediante programación; los estados, las propiedades y los valores que puede definir el usuario se pueden definir mediante programación; y la notificación de los cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia".

El lector de pantalla debe anunciar el nombre, el rol, el estado y el valor de los controles a medida que estos reciben el foco. Name es la etiqueta del control. Role es el tipo de control. Estado define si el control está seleccionado, ampliado o reducido. Valor es el contenido real del control.

En Success Criterion 2.4.4 Link Purpose (In Context) se indica lo siguiente: "La finalidad de cada enlace se puede determinar solo a partir del texto del enlace o del texto del enlace junto con su contexto de enlace determinado mediante programación, excepto cuando la finalidad del enlace sería ambigua para los usuarios en general".

Verifique que el lector de pantalla anuncie el texto del enlace a medida que recibe el foco. Asegúrese de que el texto es suficiente para identificar la finalidad del enlace.

En Success Criterion 2.5.3 Label in Name se indica lo siguiente: "Para los componentes de la interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre contiene el texto que se presenta visualmente".

El texto de una etiqueta visible de un componente debe incluirse en la información de etiqueta proporcionada a la tecnología de asistencia. Si el componente utiliza un atributo aria-label, el texto de la etiqueta aria debe incluir el texto de la etiqueta visible, incluso si la etiqueta visible es un gráfico.

En Success Criterion 4.1.3 Status Messages se indica lo siguiente: "En el contenido implantado mediante lenguajes de marcado, los mensajes de estado se pueden determinar mediante programación a través de roles o propiedades para que se puedan presentar al usuario mediante tecnologías de asistencia sin recibir el enfoque".

El lector de pantalla debe anunciar cualquier mensaje de estado que se muestre en la página. Los mensajes notifican al usuario de un cambio en la página o de que ha finalizado un proceso.

JAWS y NVDA pueden presentar el material de forma diferente, pero cada lector de pantalla debe comunicar cierta información sobre los elementos de la página:

Nombre, rol, estado y valor.
Texto de Enlace.
Texto alternativo de gráficos.
Cabeceras de columna y fila, que incluyen coordenadas de celda y contenido en una tabla.

Tarea 3: Uso de JAWS para validar el separador Employees

Tanto si utiliza JAWS como NVDA, el proceso de validación del lector de pantalla es similar. El objetivo de la validación es garantizar que los elementos de la página se lean con precisión. El proceso puede parecer tedioso, pero ambos lectores de pantalla tienen pulsaciones de teclas especiales para permitir a los usuarios navegar más rápidamente por una aplicación web por control de cabecera, enlace o formulario.

Cuando use cualquiera de los lectores de pantalla, use un teclado de tamaño completo porque los lectores de pantalla utilizan la almohadilla numérica del lado derecho del teclado para controles especiales.

Utilice el lector de pantalla y la aplicación inicial para validar el separador Empleados de la página Introducción.

Inicie JAWS o NVDA.

Siempre es recomendable iniciar el lector de pantalla antes de abrir el explorador. Esta práctica garantiza que se realicen todas las conexiones necesarias entre el lector de pantalla y el explorador.
Ejecutar la aplicación inicial.
```
$ ojet serve
```
El explorador se abre en la página Introducción de la aplicación y está listo para comenzar la validación.

Ambos lectores de pantalla deben comenzar a leer cuando la página esté completamente cargada.
En la aplicación en ejecución, utilice el mouse para hacer clic en el separador Empleados. Después de este paso, no utilice el mouse.

Descripción de la ilustración employees_page.png
Pulse <Ctrl+L> para centrar la atención en la barra de direcciones.
Presione <Tab>. JAWS dice: "Ir al contenido principal. El mismo enlace de página".
Presione <Tab>. JAWS dice: "Región 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 Employees (Empleados) seleccionado. 3 de 4."
Presione <Tab>. JAWS dice: "Tabla con 6 columnas y más de 13 filas..." El lector de pantalla seguirá leyendo las cabeceras y los datos de la tabla.

Ninguno de los lectores de pantalla proporciona información completa sobre lo que contiene la tabla.

El criterio de éxito 4.1.2 especifica que las etiquetas que identifican la finalidad deben acompañar a una tabla. Agregue una etiqueta descriptiva a la tabla.
Vaya a la carpeta ACCLearningPath/src/js/views y abra el archivo employees.html.

Localice la etiqueta <oj-table>.

    
<oj-table id="table"
   class="table-size"
   first-selected-row="{{selectedRow}}"
   . . .
</oj-table>
    

Modifique la etiqueta para incluir un atributo aria-label.

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

Guarde y cierre el archivo. El archivo debe tener un aspecto similar a employees-html.txt
Repita los pasos del 3 al 9 para verificar que aria-label ahora se habla cuando la tabla recibe el enfoque. Esta <Tab> inicial en la tabla coloca el foco en la primera cabecera de columna y JAWS dice: "Tabla con 6 columnas y más de 13 filas. Tabla de Empleados. Cabecera de Columna 1. Número de Empleado."
Pulse <down arrow>. El enfoque se mueve a la celda de la tabla en la fila 1, columna 1. JAWS dice: "Fila 1. 7839. No seleccionado. Columna 1. Número de Empleado. 7839".

Un usuario no desactivado hace clic en cualquier lugar de una fila para seleccionarla. Sin embargo, un usuario de solo teclado presiona la barra espaciadora para seleccionar la fila.
Pulse <right arrow> para pasar a la segunda columna. JAWS dirá: "Columna 2. Nombre de usuario King."

La tecla de flecha presiona para mover una celda en la dirección de la tecla de flecha seleccionada. JAWS debe leer el nuevo número de fila o columna y la cabecera en función de si el movimiento es vertical u horizontal en la tabla. Por ejemplo, JAWS lee el número de fila y el valor de la columna Número de empleado de la fila al navegar por la tabla verticalmente.
Pulse <right arrow> nuevamente para pasar a la columna Title. JAWS dice: "Columna 3. Presidente del cargo."
Pulse <down arrow>. JAWS dice: "Fila 2. 7698. No seleccionado. Gestor de títulos."

Tarea 4. Validación de la edición de datos de tabla

En la aplicación en ejecución, pulse <Home> para ir a la primera columna y fila de la tabla. A continuación, pulse <Space> para seleccionar la fila y pulse <F2> para cambiar la fila al modo accionable.

Cuando hay un elemento con tabulación en la tabla, como el botón Editar de la última columna de la fila, al pulsar <F2> se mueve el foco al primer elemento con tabulación. JAWS mueve el foco al botón Editar y dice: "Botón Editar. Para activarlo, pulse Intro."
Pulse <Enter>. JAWS abre el formulario Edit Employee y dice: "Edit employee. ID de empleado: 7839..." JAWS seguirá leyendo la información del empleado en el formulario hasta que se pulse una tecla.

Descripción de la ilustración emp_page_edit_emp.png
Pulse <Tab> para mover el foco al campo Employee Name (Nombre de empleado). JAWS dice: "Edición de nombre de empleado. King. Introduzca el texto."
Introduzca un nuevo nombre y, a continuación, pulse <Tab>. JAWS dice: "Edición del cargo. Presidente. Introduzca el texto."
Presione <Tab>. JAWS dice, "Hire Date readonly edit. 16 de noviembre de 1981".
Presione <Tab>. JAWS dice, "Salary edit spinbox. 5,000. Introduzca un número mayor o igual que 0. Para definir el valor, utilice las teclas de flecha o escriba el valor."
Presione <Tab>. JAWS dice: "Botón Guardar. Para activarlo, pulse Intro."
Pulse <Enter> para activar el botón Guardar. JAWS leerá un mensaje de estado similar para guardar: "Categoría de mensaje: confirmación. Actualizaciones guardadas. Se guardaron los cambios para el empleado Onegin. Accessibility Learning Path". Los usuarios del lector de pantalla deben conocer la información que incluye el título de la página, la visualización de la región del mensaje y la confirmación de guardado. Cierre el cuadro de mensaje.

Descripción de la ilustración emp_page_msg_box.png

Tanto JAWS como NVDA tienen una tecla de acceso directo para localizar gráficos con etiquetas. Pulse <Shift+G> para mover el enfoque al siguiente gráfico con etiqueta de la página. El logotipo de Oracle es el único gráfico de la página Introducción. El foco se mueve al logotipo y JAWS dice "Oracle Logo Graphic".

Ha completado el tutorial final en la ruta de aprendizaje Identificar problemas de accesibilidad. Continúe con la ruta de aprendizaje Convertir las aplicaciones Oracle JET en accesibles: Validar y corregir la accesibilidad de la aplicación para continuar con la segunda ruta de aprendizaje de esta serie de 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

Perform screen-reader validation on an Oracle JET app

F34161-02

October 2022