El contenido online debe ser accesible para una amplia variedad de usuarios, incluidas personas con discapacidad.
Estándar WCAG (Web Content Accessibility Guidelines) define guías para crear un entorno web usable por la mayoría de las personas, independientemente de sus capacidades físicas.
Repasemos las recomendaciones WCAG para el contenido.
La información y los elementos de interfaz deben ser fáciles de percibir.
Todo contenido no textual debe tener una descripción textual
La relación de contraste de color debe ser de al menos 4.5:1
Ejemplo de texto con alto contraste.
El contenido debe ser adaptativo y cambiar sin perder información ni estructura
Prueba a cambiar el tamaño de la ventana o rotar el dispositivo; los bloques se ajustarán.
El texto puede redimensionarse hasta un 200% sin tecnologías asistivas y sin pérdida de contenido
Prueba a aumentar el tamaño del texto usando el teclado:
El interlineado debe ser al menos 1.5 veces el tamaño de fuente
Este texto tiene interlineado insuficiente.
Texto continuado en una nueva línea.
El espaciado entre párrafos debe ser al menos el doble del tamaño de fuente
Primer párrafo.
Segundo párrafo. Este texto tiene más espacio entre párrafos.
El espaciado entre letras debe ser al menos 0.12 veces el tamaño de fuente
Ejemplo de texto con mayor espaciado entre letras.
El espaciado entre palabras debe ser al menos 0.16 veces el tamaño de fuente
Ejemplo de texto con mayor espaciado entre palabras.
Usando DevTools -> Elements selecciona cualquier elemento de la página.
En la sección Styles puedes ver los estilos CSS del elemento: fuente, color, etc.
Pasa el cursor sobre un elemento y mira la sección ACCESSIBILITY en el popup. El campo Contrast muestra la relación de contraste actual del elemento y una advertencia si el contraste es insuficiente.
La interfaz de usuario debe ser fácil de usar.
Accesibilidad con teclado
Toda la funcionalidad debe ser accesible mediante teclado.
Tiempo suficiente
Los usuarios deben tener tiempo suficiente para leer e interactuar con el contenido.
Seguro de percibir
El contenido no debe afectar negativamente el bienestar físico del usuario.
Navegación sencilla
Los usuarios deben tener formas cómodas de navegar y encontrar contenido.
Prueba a navegar por la página usando el teclado.
| Tecla | Descripción |
|---|---|
| Tab | Mueve el foco al siguiente elemento interactivo (links, botones, campos de entrada, etc.). |
| Shift + Tab | Mueve el foco al elemento interactivo anterior. |
| Enter | Activa el elemento actualmente enfocado (por ejemplo, hace clic en un botón o sigue un link). |
| Space | Desplaza la página hacia abajo. Activa el elemento si es un botón, checkbox o radio button. |
|
↑
←
↓
→
|
|
La información y la funcionalidad de UI deben ser claras.
El contenido debe soportar una amplia gama de dispositivos y tecnologías asistivas:
Lectores de pantalla y lupas
Control con teclado
Control por voz
Dispositivos de entrada alternativos
Como extensión del navegador extensión para Chrome y online en el navegador puedes usar la herramienta para comprobar la accesibilidad del contenido WAVE Evaluation Tool.
WAVE sigue el WCAG estándar y permite automatizar muchas comprobaciones. Bonus: WAVE incluye funciones para comprobar contraste de color.
También disponible como extensión del navegador puedes probar axe DevTools, también basada en el estándar WCAG. Para usarla después de instalar:
Уровень повышен!
