Conceptos básicos de las pruebas manuales
Las pruebas de accesibilidad manuales usan pruebas, herramientas y técnicas visuales, cognitivas y de teclado para encontrar problemas que las herramientas automatizadas no pueden detectar. Como las herramientas automatizadas no abarcan todos los criterios de éxito identificados en las WCAG, es fundamental que ejecutes pruebas de accesibilidad automatizadas y sigas probando.
A medida que avanza la tecnología, las herramientas automatizadas podrían cubrir más pruebas, pero, hoy en día, se deben agregar a tus protocolos de prueba las verificaciones manuales y de tecnología de accesibilidad para abarcar todos los puntos de control de las WCAG aplicables.
Beneficios de las pruebas de accesibilidad manuales:
- Son bastante sencillas y rápidas de ejecutar.
- Detectan un porcentaje más alto de problemas que las pruebas automatizadas por sí solas.
- Se necesitan pocas herramientas y experiencia para tener éxito.
Desventajas de las pruebas de accesibilidad manuales:
- Son más complejas y requieren más tiempo que las pruebas automatizadas.
- Pueden ser difíciles de repetir a gran escala.
- Se requiere más experiencia en accesibilidad para ejecutar pruebas e interpretar los resultados.
Compara qué elementos y detalles de accesibilidad puede detectar una herramienta automatizada, en comparación con los que no se detectarán.
Tipos de pruebas manuales
Existen muchas herramientas y técnicas manuales que se deben tener en cuenta cuando se analiza la accesibilidad digital de tu página web o app. Las tres áreas de enfoque más importantes en las pruebas manuales son la funcionalidad del teclado, las revisiones centradas en lo visual y las verificaciones generales de contenido.
En este módulo, abordamos cada uno de estos temas de manera general, pero las siguientes pruebas no pretenden ser una lista exhaustiva de todas las pruebas manuales que puedes o debes ejecutar. Te recomendamos que comiences con una lista de tareas de accesibilidad manual de una fuente confiable y desarrolles tu propia lista de tareas de pruebas manuales enfocada para las necesidades específicas de tu equipo y producto digital.
Verificaciones del teclado
Se estima que aproximadamente el 25% de todos los problemas de accesibilidad digital se relacionan con la falta de compatibilidad con el teclado. Como aprendimos en el módulo de enfoque de teclado, esto afecta a todos los tipos de usuarios, incluidos los usuarios que solo usan el teclado con visión, las personas con visión reducida o ciegas que usan lectores de pantalla, y las personas que usan software de reconocimiento de voz que utiliza tecnología que también depende de que el contenido sea accesible con el teclado.
Las pruebas de teclado responden preguntas como las siguientes:
- ¿La página web o la función requieren un mouse para funcionar?
- ¿El orden de tabulación es lógico e intuitivo?
- ¿El indicador de enfoque de teclado siempre es visible?
- ¿Puedes quedarte atascado en un elemento que no debería atrapar el enfoque?
- ¿Puedes navegar detrás o alrededor de un elemento que debería atrapar el enfoque?
- Cuando se cierra un elemento que recibió el enfoque, ¿el indicador de enfoque vuelve a un lugar lógico?
Si bien el impacto de la funcionalidad del teclado es enorme, el procedimiento de prueba es bastante simple. Todo lo que debes hacer es dejar de lado el mouse o instalar un pequeño paquete de JavaScript y probar tu sitio web solo con el teclado. Los siguientes comandos son esenciales para las pruebas de teclado.
Verificaciones visuales
Las verificaciones visuales se centran en los elementos visuales de la página y utilizan herramientas como la ampliación de pantalla o el zoom del navegador para revisar la accesibilidad del sitio web o la app.
Las verificaciones visuales pueden indicarte lo siguiente:
- ¿Existen problemas de contraste de color que una herramienta automatizada no pudo detectar, como texto sobre un degradado o una imagen?
- ¿Hay elementos que parecen encabezados, listas y otros elementos estructurales, pero no están codificados como tales?
- ¿Los vínculos de navegación y las entradas de formulario son coherentes en todo el sitio web o la app?
- ¿Hay algún parpadeo, destello o animación que exceda las recomendaciones?
- ¿El contenido tiene el espaciado adecuado? ¿Para letras, palabras, líneas y párrafos?
- ¿Puedes ver todo el contenido con una lupa de pantalla o el zoom del navegador?
Verificaciones de contenido
A diferencia de las pruebas visuales que se centran en los diseños, el movimiento y los colores, las verificaciones de contenido se centran en las palabras de la página. No solo debes observar la copia en sí, sino que también debes revisar el contexto para asegurarte de que tenga sentido para los demás.
Las verificaciones de contenido responden preguntas como las siguientes:
- ¿Los títulos de las páginas, los encabezados y las etiquetas de formulario son claros y descriptivos?
- ¿Las alternativas de imágenes son concisas, precisas y útiles?
- ¿Se usa solo el color como la única forma de transmitir significado o información?
- ¿Los vínculos son descriptivos o usas texto genérico, como "leer más" o "hacer clic aquí"?
- ¿Hay algún cambio en el idioma dentro de una página?
- ¿Se usa un lenguaje sencillo y se explican todas las siglas cuando se mencionan por primera vez?
Algunas verificaciones de contenido se pueden automatizar, en parte. Por ejemplo, puedes escribir un linter de JavaScript que busque "Hacer clic aquí" y te sugiera realizar un cambio. Sin embargo, estas soluciones personalizadas a menudo aún necesitan que una persona cambie la copia por algo contextual.
Demostración: Prueba manual
Hasta ahora, ejecutamos pruebas automatizadas en nuestra página web de demostración y encontramos y solucionamos ocho tipos de problemas diferentes. Ahora estamos listos para ejecutar verificaciones manuales para ver si podemos descubrir aún más problemas de accesibilidad.
Paso 1
Nuestra demostración actualizada de CodePen tiene aplicadas todas las actualizaciones de accesibilidad automatizadas.
Mírala en modo de depuración para continuar con las
siguientes 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
Para comenzar el proceso de pruebas manuales, deja de lado el mouse o el trackpad y navega hacia arriba y hacia abajo por el DOM solo con el teclado.
Problema 1: Indicador de enfoque visible
Deberías ver el primer problema del teclado de inmediato o, mejor dicho, no deberías verlo, ya que se quitó el indicador de enfoque visible. Cuando escanees el CSS en la demostración, deberías encontrar el temido "outline: none" agregado a la base de código.
:focus {
outline: none;
}
Corrijámoslo.
Como aprendiste en el módulo de enfoque de teclado, debes quitar esta línea de código para permitir que los navegadores web agreguen un enfoque visible para los usuarios. Puedes ir un paso más allá y crear un indicador de enfoque diseñado para satisfacer la estética de tu producto digital.
:focus {
outline: 3px dotted #008576;
}
Problema 2: Orden de enfoque
Una vez que hayas modificado el indicador de enfoque y sea visible, asegúrate de tabular la página. Mientras lo haces, deberías notar que el campo de entrada de formulario que se usa para suscribirse al boletín informativo no recibe el foco. Se quitó del orden de enfoque natural con un tabindex negativo.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Como queremos que las personas usen este campo para registrarse en nuestro boletín informativo, todo lo que debemos hacer es quitar el tabindex negativo o configurarlo en cero para permitir que la entrada vuelva a enfocarse con el teclado.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Paso 3
Una vez que se verifica el enfoque de teclado, pasamos a las verificaciones visuales y de contenido.
Problema 3: Contraste de color del vínculo
Mientras realizabas las pruebas de teclado tabulando hacia arriba y hacia abajo en la página de demostración, probablemente notaste que el teclado se enfocó en tres vínculos ocultos visualmente en los párrafos sobre las diferentes afecciones médicas.
Para que nuestra página sea accesible, los vínculos deben destacarse del texto circundante y deben incluir un cambio de estilo que no sea de color cuando se coloque el cursor sobre ellos y cuando se enfoquen con el teclado.
Corrijámoslo.
Una solución rápida es agregar un subrayado a los vínculos dentro de los párrafos para que se destaquen. Esto resolvería el problema de accesibilidad, pero es posible que no se adapte a la estética general del diseño que deseas lograr.
Si decides no agregar un subrayado, deberás modificar los colores de manera que cumplan con los requisitos del fondo y la copia.
Cuando mires la demostración con una herramienta de verificación de contraste de vínculos, verás que el color del vínculo cumple con el requisito de contraste de color de 4.5:1 entre el texto de tamaño normal y el fondo. Sin embargo, los vínculos no subrayados también deben cumplir con un requisito de contraste de color de 3:1 con el texto circundante.
Una opción es cambiar el color del vínculo para que coincida con los otros elementos de la página. Sin embargo, si cambias el color del vínculo a verde, también se debe modificar el texto del cuerpo para cumplir con los requisitos generales de contraste de color entre los tres elementos: vínculos, fondo y texto circundante.
Problema 4: Contraste de color del ícono
Otro problema de contraste de color que se pasó por alto son los íconos de redes sociales. En el módulo de color y contraste, aprendiste que los íconos esenciales deben cumplir con un contraste de color de 3:1 con el fondo. Sin embargo, en la demostración, los íconos de redes sociales tienen una relación de contraste de 1.3:1.
Corrijámoslo.
Para cumplir con los requisitos de contraste de color de 3:1, los íconos de redes sociales se cambian a un gris más oscuro.
Problema 5: Diseño del contenido
Si observas el diseño del contenido del párrafo, el texto está completamente justificado. Como aprendiste en el módulo de tipografía, esto crea "ríos de espacio", lo que puede dificultar la lectura del texto para algunos usuarios.
p.bullet {
text-align: justify;
}
Para restablecer la alineación del texto en la demostración, puedes actualizar el código a text-align: left; o quitar esa línea por completo del CSS, ya que la alineación izquierda es la predeterminada para los navegadores. Asegúrate de probar el código, en caso de que otros estilos heredados quiten la alineación de texto predeterminada.
p.bullet {
text-align: left;
}
Paso 4
Una vez que hayas identificado y corregido todos los problemas de accesibilidad manuales que se describen en los pasos anteriores, tu página debería verse similar a nuestra captura de pantalla.
Es posible que encuentres más problemas de accesibilidad en tus verificaciones manuales que los que abordamos en este módulo. Descubriremos muchos de estos problemas en el próximo módulo.
Próximo paso
¡Buen trabajo! Completaste los módulos de pruebas automatizadas y manuales. Puedes ver nuestro CodePen actualizado, que tiene aplicadas todas las correcciones de accesibilidad automatizadas y manuales.
Ahora, dirígete al último módulo de pruebas centrado en las pruebas de tecnología de accesibilidad.