Interfaz web
Una interfaz accesible: de la estructura de la página al carrusel
Cómo crear una interfaz que se pueda leer, abrir en el móvil y utilizar con el teclado.
La accesibilidad empieza por la estructura de la página. El lector debe encontrar la sección que necesita, comprender el propósito de un enlace y realizar la acción. El color, la animación y el tamaño de la pantalla no deben ser las únicas pistas.
W3C Design System muestra cómo construir estas interfaces con componentes reutilizables. Es un conjunto de recursos para los sitios de W3C. Utilizar sus componentes no demuestra por sí solo el cumplimiento de WCAG. Hay que comprobar el resultado en las páginas concretas.
Defina primero la estructura
La página necesita un encabezado principal que indique su tema. Los encabezados de segundo nivel dividen el texto en secciones. El tercer nivel organiza el contenido de una sección. No elija el nivel del encabezado solo por el tamaño de letra: CSS controla el tamaño.
Separe el menú, el contenido principal y el pie con los elementos semánticos nav, main y footer. Al principio de la página, incluya un enlace «Ir al contenido». Ayuda a saltar el menú repetido cuando se utiliza el teclado.
Para abrir otra página, utilice un enlace. Para realizar una acción en la página actual, utilice un botón. Su nombre debe describir el resultado: «Abrir caso» es más claro que «Más información» cuando hay varias tarjetas.
Haga que la tarjeta se entienda
Una tarjeta necesita una imagen, un título y una descripción breve. Si la imagen solo ilustra el tema que ya indica el título, deje el atributo alt vacío. Si aporta información necesaria, descríbala con palabras. No repita todo el título en el texto alternativo.
Coloque el enlace en el título. Puede ampliar su área de pulsación a toda la tarjeta mediante CSS. Así el lector de pantalla recibe un nombre de enlace breve y la persona puede pulsar la imagen o el espacio libre de la tarjeta. No coloque botones dentro del enlace.
Indique las dimensiones de la imagen. El navegador reservará su espacio y el texto no se moverá cuando termine de cargar. Para pantallas pequeñas, ofrezca una portada de menor tamaño mediante srcset.
Deje que la persona controle el carrusel
El carrusel no debe retirar un contenido mientras se está leyendo. Desactive el avance automático de forma predeterminada. Muestre los botones «Diapositiva anterior» y «Diapositiva siguiente», el número de la diapositiva actual y el total.
Compruebe los botones con el teclado. Después de cambiar de diapositiva, el foco debe permanecer en el botón que se pulsó. Los enlaces de diapositivas ocultas no deben aparecer en el recorrido con Tab. El anuncio de la diapositiva actual debe ser breve.
Si la persona ha desactivado las animaciones en los ajustes del dispositivo, cambie de diapositiva sin movimiento. Sin JavaScript, los contenidos deben seguir disponibles como una lista de enlaces. El carrusel mejora la forma de consultar el contenido, pero no debe ser la única vía para abrirlo.
Compruebe la pantalla pequeña y el aumento de tamaño
Abra la página con un ancho de 320 píxeles CSS. Compruebe que el texto no exige desplazamiento horizontal. Una tabla puede tener su propio desplazamiento si hace falta para conservar el sentido de sus filas y columnas.
Aumente el zoom del navegador al 200 %. Los encabezados y botones no deben superponerse. No fije la altura de una tarjeta si el texto puede ocupar más líneas después de traducirlo o aumentar el tamaño.
WCAG establece un contraste mínimo de 4.5:1 para el texto normal y de 3:1 para el texto grande. Compruebe también los bordes de los elementos y la visibilidad del foco. Los colores predeterminados de Bootstrap no eliminan la necesidad de comprobarlos.
Comprobación breve antes de publicar
- Recorra la página con Tab. El foco debe ser visible y seguir el orden de lectura.
- Abra el menú, cambie de diapositiva y siga un enlace con el teclado.
- Compruebe el ancho de 320 píxeles y el zoom al 200 %.
- Desactive JavaScript. El texto, los enlaces y los contenidos deben seguir disponibles.
- Compruebe la página con un lector de pantalla. Una prueba automática no sustituye este paso.