Este módulo se enfoca en el uso de tecnología de asistencia (TA) para las pruebas de accesibilidad. Una persona con discapacidad puede usar TA para aumentar, mantener o mejorar sus capacidades para realizar una tarea.
En el espacio digital, las TA pueden ser de los siguientes tipos:
- Tecnología baja o nula: varillas bucales y cefálicas, lupas manuales, dispositivos con botones grandes
- Alta tecnología: dispositivos activados por voz, dispositivos de seguimiento ocular, teclados y mouses adaptativos
- Hardware: Botones de conmutación, teclados ergonómicos y dispositivos Braille con actualización automática
- Software: Programas de texto a voz, subtítulos instantáneos, lectores de pantalla
Te recomendamos que uses varios tipos de AT en tu flujo de trabajo de pruebas general.
Conceptos básicos de las pruebas de lectores de pantalla
En este módulo, nos enfocaremos en uno de los AT digitales más populares: los lectores de pantalla. Un lector de pantalla es un software que lee el código subyacente de un sitio web o una app y, luego, convierte esa información en voz o en salida braille para el usuario.
Los lectores de pantalla son esenciales para las personas ciegas y sordociegas, pero también pueden beneficiar a las personas con visión reducida, trastornos de lectura y discapacidades cognitivas.
Compatibilidad del navegador
Hay varias opciones de lectores de pantalla disponibles. Los lectores de pantalla más populares son JAWS, NVDA y VoiceOver para computadoras de escritorio, y VoiceOver y TalkBack para dispositivos móviles.
Según tu sistema operativo (SO), tu navegador favorito y el dispositivo que usas, un lector de pantalla puede destacarse como la mejor opción. La mayoría de los lectores de pantalla se compilan teniendo en cuenta hardware y navegadores web específicos. Cuando usas un lector de pantalla con un navegador para el que no se calibró, es posible que encuentres más "errores" o comportamientos inesperados. Los lectores de pantalla funcionan mejor cuando se usan en las siguientes combinaciones.
| Lector de pantalla | SO | Compatibilidad del navegador |
|---|---|---|
| Job Access With Speech (JAWS) | Windows | Chrome, Firefox y Edge |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome y Firefox |
| Narrador | Windows | Edge |
| VoiceOver | macOS | Safari |
| Orca | Linux | Firefox |
| TalkBack | Android | Chrome y Firefox |
| VoiceOver (para dispositivos móviles) | iOS | Safari |
| ChromeVox | ChromeOS | Chrome |
Comandos del lector de pantalla
Una vez que hayas configurado correctamente el software del lector de pantalla para tu computadora o dispositivo móvil, debes consultar la documentación del lector de pantalla (cuyo vínculo se incluye en la tabla anterior) y ejecutar algunos comandos esenciales del lector de pantalla para familiarizarte con la tecnología. Si ya usaste un lector de pantalla, considera probar uno nuevo.
Cuando uses un lector de pantalla para realizar pruebas de accesibilidad, tu objetivo es detectar problemas en el código que interfieran con el uso de tu sitio web o app, no emular la experiencia de un usuario de lector de pantalla. Por lo tanto, puedes hacer mucho con algunos conocimientos básicos, unos pocos comandos del lector de pantalla y un poco (o mucho) de práctica.
Si necesitas comprender mejor la experiencia del usuario de las personas que usan lectores de pantalla y otras TA, puedes comunicarte con muchas organizaciones y personas para obtener esta valiosa información. Recuerda que usar un AT para probar el código en función de un conjunto de reglas y preguntar a los usuarios sobre su experiencia a menudo arroja resultados diferentes. Ambos son aspectos importantes para crear productos completamente inclusivos.
Comandos de teclas para lectores de pantalla de computadoras
| Elemento | NVDA (Windows) | VoiceOver (macOS) |
|---|---|---|
| Teclas de comandos generales | Insertar | Control + Option |
| Detener audio | Control | Control |
| Leer siguiente/anterior | ↓ o ↑ | Control + Option + → o ← |
| Comenzar a leer | Insertar↓ | Control + Option + A |
| Lista de elementos/Rotor | NVDA + F7 | Control + Option + U |
| Puntos de referencia | D | Control + Option + U |
| Encabezados | H | Control + Option + Command + H |
| Vínculos | K | Control + Option + Command + L |
| Controles de formulario | V | Control + Option + Command + J |
| Tablas | T | Control + OptionCommand + T |
| Dentro de Tablas | Insert Alt + ↓ ↑ ← → | Control + Option + ↓ ↑ ← → |
Comandos principales para lectores de pantalla en dispositivos móviles
| Elemento | TalkBack (Android) | VoiceOver (iOS) |
|---|---|---|
| Explorar | Arrastra un dedo por la pantalla. | Arrastra un dedo por la pantalla. |
| Seleccionar o activar | Presionar dos veces | Presionar dos veces |
| Mover hacia arriba o hacia abajo | Desliza arriba o abajo con dos dedos | Desliza tres dedos hacia arriba o hacia abajo |
| Cambiar de página | Desliza hacia la izquierda o la derecha con dos dedos | Desliza hacia la izquierda o la derecha con tres dedos |
| Anterior/Siguiente | Desliza el dedo hacia la izquierda o la derecha | Desliza el dedo hacia la izquierda o la derecha |
Demostración de prueba del lector de pantalla
Para probar nuestra demostración, usamos Safari en una laptop con macOS y capturamos el sonido. Puedes seguir estos pasos con cualquier lector de pantalla, pero la forma en que encuentres algunos errores puede ser diferente de la que se describe en este módulo.
Paso 1
Visita el CodePen actualizado, que tiene aplicadas todas las actualizaciones de accesibilidad manuales y automatizadas.
Míralo en modo de depuración para continuar con las próximas pruebas. Esto es importante, ya que quita el <iframe> que rodea la página web de demostración, lo que puede interferir con algunas herramientas de prueba. Obtén más información sobre el modo de depuración de CodePen.
Paso 2
Activa el lector de pantalla que prefieras y ve a la página de demostración. Puedes considerar navegar por toda la página de arriba abajo antes de enfocarte en problemas específicos.
Grabamos nuestro lector de pantalla para cada problema, antes y después de que se aplicaran las correcciones a la demostración. Te recomendamos que ejecutes la demostración con tu propio lector de pantalla.
Problema 1: Estructura del contenido
Los encabezados y los puntos de referencia son una de las principales formas en que las personas navegan con lectores de pantalla. Si no están presentes, el usuario de un lector de pantalla debe leer toda la página para comprender el contexto. Esto puede llevar mucho tiempo y causar frustración.
Si intentas navegar por cualquiera de los elementos de la demostración, descubrirás rápidamente que no existen.
- Ejemplo de punto de referencia:
<div class="main">...</div> - Ejemplo de encabezado:
<p class="h1">Join the Club</p>
Si actualizaste todo correctamente, no debería haber ningún cambio visual, pero la experiencia con el lector de pantalla mejorará significativamente.
Vamos a solucionarlo.
Algunos elementos inaccesibles no se pueden observar solo con mirar el sitio. Es posible que recuerdes la importancia de los niveles de encabezado y el HTML semántico del módulo Estructura del contenido. Un fragmento de contenido puede parecer un encabezado, pero en realidad está envuelto en un <div> estilizado.
Para corregir el problema con los encabezados y los puntos de referencia, primero debes identificar cada elemento que se debe marcar como tal y actualizar el código HTML relacionado. Asegúrate de actualizar el CSS relacionado también.
- Ejemplo de punto de referencia:
<main>...</main> - Ejemplo de encabezado:
<h1>Join the Club</h1>
Si actualizaste todo correctamente, no debería haber ningún cambio visual, pero la experiencia con el lector de pantalla mejorará significativamente.
Problema 2: Contexto del vínculo
Es importante brindarles a los usuarios de lectores de pantalla información sobre el propósito de un vínculo y si este los redirecciona a una nueva ubicación fuera del sitio web o la aplicación.
En nuestra demostración, corregimos la mayoría de los vínculos cuando actualizamos el texto alternativo de la imagen activa, pero hay algunos vínculos adicionales sobre las diversas enfermedades raras que podrían beneficiarse de contexto adicional, en especial, porque redireccionan a una nueva ubicación.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
Para solucionar este problema para los usuarios de lectores de pantalla, actualizamos el código para agregar más información sin afectar el elemento visual. O bien, para ayudar a más personas, como aquellas con trastornos cognitivos y de lectura, podemos optar por agregar texto visual adicional.
Existen muchos patrones diferentes que podemos considerar para agregar información adicional sobre los vínculos. En nuestro entorno, que admite solo un idioma, una etiqueta ARIA es una opción sencilla en esta situación. Es posible que notes que la etiqueta ARIA anula el texto del vínculo original, por lo que debes asegurarte de incluir esa información en tu actualización.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
Problema 3: Imagen decorativa
En nuestro módulo de pruebas automatizadas, Lighthouse no pudo detectar el SVG intercalado que actúa como la imagen de presentación principal en nuestra página de demostración. Sin embargo, el lector de pantalla la encuentra y la anuncia como "imagen" sin información adicional.
Esto es así incluso sin agregar explícitamente el atributo role="img" al SVG.
<div class="section-right">
<svg>...</svg>
</div>
Para solucionar este problema, primero debemos decidir si la imagen es informativa o decorativa. Según esa decisión, debemos agregar el texto alternativo de imagen adecuado (imagen informativa) u ocultar la imagen de los usuarios de lectores de pantalla (imagen decorativa).
Sopesamos las ventajas y desventajas de la mejor manera de categorizar la imagen y decidimos que era decorativa, lo que significa que queremos agregar o modificar el código para ocultarla. Un método rápido es agregar un role="presentation" directamente a la imagen SVG. Esto envía una señal al lector de pantalla para que omita esta imagen y no la incluya en el grupo de imágenes.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problema 4: Decoración de viñetas
Es posible que hayas notado que el lector de pantalla lee la imagen de viñeta de CSS en las secciones de enfermedades raras. Si bien esta imagen no es la misma que analizamos en el módulo Imágenes, de todos modos se debe modificar, ya que interrumpe el flujo del contenido y podría distraer o confundir a un usuario de lector de pantalla.
<p class="bullet">...</p>
Al igual que en el ejemplo de imagen decorativa que se analizó anteriormente, puedes agregar un role="presentation" al código HTML con la clase de viñeta para ocultarlo del lector de pantalla. Del mismo modo, un role="none" funcionaría. Solo asegúrate de no usar aria-hidden: true, ya que ocultarás toda la información del párrafo a los usuarios de lectores de pantalla.
<p class="bullet" role="none">...</p>
Problema 5: Campo de formulario
En el módulo Formularios, aprendimos que todos los campos de formulario también deben tener una etiqueta visual y programática. Esta etiqueta debe permanecer visible en todo momento.
En nuestra demostración, faltan una etiqueta visual y una programática en el campo de correo electrónico de registro al boletín informativo. Hay un elemento de marcador de posición de texto, pero este no reemplaza la etiqueta, ya que no es visualmente persistente y no es totalmente compatible con todos los lectores de pantalla.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
Para solucionar este problema, reemplaza el marcador de posición de texto por un elemento de etiqueta similar. Ese elemento de etiqueta está conectado de forma programática al campo del formulario, y se agregó movimiento con JavaScript para mantener la etiqueta visible incluso cuando se agrega contenido al campo.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
Conclusión
¡Felicitaciones! Completaste todas las pruebas de esta demostración. Puedes ver todos estos cambios en el Codepen actualizado para esta demostración.
Ahora puedes usar lo que aprendiste para revisar la accesibilidad de tus propios sitios web y apps.
El objetivo de todas estas pruebas de accesibilidad es abordar la mayor cantidad posible de problemas que un usuario podría encontrar. Sin embargo, esto no significa que tu sitio web o aplicación sean perfectamente accesibles una vez que termines. Para tener más éxito, diseña tu sitio web o aplicación con accesibilidad durante todo el proceso e incorpora estas pruebas a las demás pruebas previas al lanzamiento.