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

Introducción

Cuando se utiliza un lector de pantalla con una aplicación web, se utiliza el término validación en lugar de la palabra test. Existe 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 navegador y del lector de pantalla.

Las directrices de accesibilidad de contenido web (WCAG) 2.2 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 se ocupan exclusivamente del uso de un lector de pantalla para navegar por una aplicación.

Idealmente, una revisión del lector de pantalla de una aplicación se realiza sin el uso de un ratón y con la pantalla apagada o cubierta.

Aprende 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 representar 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 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 la versión 13.0 (o posterior) de Oracle JET instalada
Navegador web de Google Chrome instalado y configurado como navegador web predeterminado
Acceso a las Directrices de accesibilidad de contenido web 2.2
Acceso a la Guía de gestos y teclado de Oracle JET
Finalización del tutorial anterior en esta ruta de aprendizaje, Prueba de una aplicación de Oracle JET para accesibilidad solo de 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 de JAWS soporta mensajes ARIA (Aplicación de Internet enriquecida accesible) y estructuras web complejas, y en opinión del autor, a menudo es más robusta que otros lectores de pantalla. JAWS ofrece un período de demostración de 40 minutos de forma gratuita, lo 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. Es de código abierto y funciona con Python. Los usuarios a menudo prefieren las voces disponibles con NVDA, y las revisiones de cabeza a cabeza de JAWS y NVDA revelan que NVDA lee con mayor precisión las páginas web. JAWS puede adivinar la lectura de una etiqueta, mientras que NVDA lee estrictamente desde el marcado. Dos características principales de NVDA son sus pequeñas necesidades 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.2 que abordan la validación del lector de pantalla.

Success Criterion 1.1.1 Non-text Content indica: "Todo el contenido no textual que se presenta al usuario tiene una alternativa textual"

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.

El criterio de sucesión 1.3.1 Información y relaciones indica: "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 inspección visual porque las cabeceras forman parte de la estructura de la página. En el contexto de la utilización de lectores de pantalla, el Criterio de Conformidad 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.

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

Success Criterion 4.1.2 Name, Role, Value (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 del 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 se enfocan. Name es la etiqueta del control. Rol es el tipo de control. State define si el control se comprueba, selecciona, amplía o contrae. Valor es el contenido real del control.

Success Criterion 2.4.4 Link Purpose (In Context) indica: "El propósito 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 el propósito del enlace sea ambiguo para los usuarios en general".

Compruebe que el lector de pantalla anuncia el texto del enlace a medida que recibe el foco. Asegúrese de que el texto es suficiente para identificar el propósito del enlace.

Success Criterion 2.5.3 Label in Name indica: "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 aunque la etiqueta visible sea un gráfico.

Success Criterion 4.1.3 Status Messages indica: "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, de modo que se pueden presentar al usuario mediante tecnologías de asistencia sin recibir enfoque".

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

JAWS y NVDA pueden presentar material de manera 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 mediante el control de encabezado, enlace o formulario.

Cuando utilice cualquiera de los dos lectores de pantalla, utilice un teclado de tamaño completo porque los lectores de pantalla utilizan el teclado numérico del lado derecho del teclado para controles especiales.

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

Inicie JAWS o NVDA.

Siempre es mejor iniciar el lector de pantalla antes de abrir el navegador. Esta práctica garantiza que todas las conexiones necesarias se realicen entre el lector de pantalla y el explorador.
Ejecute la aplicación de inicio.
```
$ 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 que se está ejecutando, utilice el mouse para hacer clic en la ficha Empleados. Después de este paso, no utilice el mouse.
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…" El lector de pantalla seguirá leyendo los encabezados y datos de la tabla.

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

El Criterio de Conformidad 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.

Busque 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 foco. Este <Tab> inicial en la tabla coloca el foco en la cabecera de la primera 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 foco se mueve a la celda de la tabla de la fila 1, columna 1. JAWS dice: "Fila 1. 7839. No seleccionado. Columna 1. Número de empleado. 7839".

Un usuario que no esté desactivado hace clic en cualquier parte 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".

Las pulsaciones de la tecla de flecha mueven 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.
Vuelva a pulsar <right arrow> para pasar a la columna Título. JAWS dice: "Columna 3. Título Presidente".
Pulse <down arrow>. JAWS dice: "Fila 2. 7698. No seleccionado. Administrador de títulos".

Tarea 4: Validar edición de datos de tabla

En la aplicación en ejecución, pulse <Home> para pasar 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 que se puede tabular 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 que se puede tabular. JAWS mueve el foco al botón Editar y dice: "Botón Editar. Para activar, pulse Intro."
Pulse <Enter>. JAWS abre el formulario Editar empleado y dice: "Editar empleado. ID de empleado: 7839…" JAWS seguirá leyendo la información del empleado en el formulario hasta que se pulse una tecla.
Pulse <Tab> para mover el foco al campo Nombre del empleado. JAWS dice: "Edición de nombre de empleado. King. Escriba texto.".
Escriba un nuevo nombre y, a continuación, pulse <Tab>. JAWS dice: "Edición de título de trabajo. Presidente. Escriba texto.".
Pulse <Tab>. JAWS dice: "Edición de solo lectura de fecha de contratación. 16 de noviembre de 1981.".
Pulse <Tab>. JAWS dice: "Edición de salario 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".
Pulse <Tab>. JAWS dice: "Botón Guardar. Para activar, 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. Los cambios para el empleado Onegin se han guardado. Ruta de aprendizaje de accesibilidad". Los usuarios del lector de pantalla deben conocer la información relacionada con 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.

Tanto JAWS como NVDA tienen una tecla de acceso directo para localizar gráficos etiquetados. Pulse <Shift+G> para mover el foco al siguiente gráfico etiquetado de la página. El logotipo de Oracle es el único gráfico de la página Introducción. Focus pasa al logotipo, y JAWS dice: "Oracle Logo Graphic".

Siguiente paso

Este tutorial concluye el módulo Identify Accessibility Issues en esta ruta de aprendizaje sobre la accesibilidad de las aplicaciones web.

Prueba de una aplicación de Oracle JET para la accesibilidad: inspección visual
Prueba de una Aplicación Oracle JET para Accesibilidad de Sólo Teclado
Realizar validación de lector de pantalla en una aplicación Oracle JET

Puede continuar con el siguiente tutorial de la ruta de aprendizaje, Personalizar los eventos del ciclo de vida conectado, en el módulo Validar y corregir la accesibilidad de la aplicación.

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

Título e Información de Copyright

Perform screen-reader validation on an Oracle JET app

F71535-02

Oracle y/o sus filiales.