Herramientas para evaluar accesibilidad
Listado de herramientas sugeridas para las validaciones automáticas y manuales:
Extensión Web Developer
La extensión Web Developer permite verificar si las imágenes tienen texto alternativo (alt). Instalar y ejecutar:
- En la opción "Images", elegir "Display alt attributes" y “Outline images without alt attributes”.
- Revisar que las imágenes informativas tengan el texto alternativo (alt) que describa la imagen, que las decorativas usen alt="" y que no existan imágenes sin alt.
Extensión HeadingsMap
La extensión HeadingsMap permite analizar la jerarquía de encabezados en el navegador: instalar en el navegador y ejecutarla. Revisar que los encabezados siguen un orden jerárquico (h1, h2, … , h6) sin omitir niveles, y que no se utilicen encabezados con el único objetivo de dar formato al texto. (Criterio 1.3.1).
Extension tab (Tab order accessibility testing)
Esta extensión muestra el orden en que los elementos reciben el foco al navegar con el teclado. Instalar y ejecutarla, se entrega el siguiente resultado.
Navegar con Tab y comprobar que el foco avanza en un orden lógico de lectura.
La versión actual es la 2025.1.2, y consta de un único ejecutable:
- Instalar NVDA en el ordenador.
- Crear una copia portable en una unidad USB o una carpeta de tu disco duro.
- Ejecutar NVDA desde un CD o cualquier otro medio de sólo lectura y usarlo.
- El instalador de NVDA habla desde el principio. Una vez abierto, no se dependerá de nadie para usarlo.
Colour Contrast Analyser
Para el nivel de contraste se dispone de “Colour Contrast Analyser”, que informa acerca de la relación entre texto y fondo. Instalar la herramienta gratuit Colour Contrast Analyser. Ejecutarla y acceder a la siguiente pantalla:
- Colocar la ventana sobre el contenido o imagen que quiera evaluar.
- Seleccionar el lápiz de Foreground y arrastre hasta el color que requiere evaluar.
- Seleccionar el segundo lápiz de Background y arrastrar hasta el segundo color a evaluar (fondo).
- Una vez seleccionados fondo y primer plano, se presentan los resultados en la parte de abajo.
- Comprobar si cumple con el contraste mínimo (7:1 para texto normal, 4.5:1 para texto grande).
Permite verificar si el texto mantiene su espaciado correcto sin perder contenido ni funcionalidad.
- Ir al enlace del bookmarklet y arrastrar "Text Spacing" a la barra de marcadores.
- Abrir la página web a evaluar.
- Hacer clic en el bookmarklet en la barra de marcadores.
- Verificar que el texto no se corte ni se solape.
Responsive Design Checker
- Herramienta en línea para ver cómo se adapta un sitio web a diferentes dispositivos y resoluciones. Para usarla:
- Ingresar a Responsive Design Checker.
- Seleccionar un dispositivo o resolución para ver la vista previa.
- Am I responsive?: Herramienta en línea que muestra cómo se visualiza un sitio web en dispositivos como escritorio, tablet y smartphone. Para usarlo:
- Ir a Am I Responsive?
- Ingresar la URL del sitio.
- Visualizar la vista simultánea en diferentes dispositivos.
Photosensitive Epilepsy Analysis Tool (PEAT)
La herramienta PEAT evalúa archivos de video y permite detectar contenido con destellos que puedan provocar convulsiones en personas con fotosensibilidad. Instalar y ejecutarla.
- Abrir la herramienta y cargar el video o animación a evaluar.
- Ejecutar el análisis
- Revisar si hay destellos peligrosos.
- Acceder a un video de ejemplo de uso de la herramienta en inglés.
Extensión de navegador: Regla Virtual
Permite medir elementos interactivos en píxeles para evaluar si cumplen con el mínimo de 44x44 px. Instalar y ejecutarla (para el caso de Chrome, se debe habilitar opción de Smart page ruler), se despliega la siguiente pantalla:
Medir largo y ancho en píxeles del elemento interactivo utilizando la herramienta sugerida u otra.
Permite verificar si el código HTML es válido. Acceda a al validador de la W3C.
Seleccionar una de las opciones:
• Validate by URL (la opción más utilizada): ingresar la url de la página a verificar
• Validate by File Upload: subir un archivo HTML desde la computadora.