HTML accesible
15 pasos en 5 series de HTML.
Quince pasos, y la primera serie se llama Empieza por el elemento correcto porque eso es, de verdad, casi todo. Un button es accesible; un div con un manejador de clic es un pequeño proyecto.
Después vienen los nombres accesibles y el estado, el manejo del foco y la visibilidad, y el contenido que se lee con sentido fuera de orden. ARIA aparece donde tiene que aparecer y no antes.
Empieza por el elemento correcto
- Usa el elemento que ya lo haceCada atributo ARIA que agregas es uno que el navegador te habría dado gratis.
- Los puntos de referencia y sus nombresLos puntos de referencia son cómo quien usa lector de pantalla salta a la parte que busca.
- Qué escribir en el altEl texto alternativo es lo que la imagen dice, no lo que la imagen es.
- Idioma y direcciónAcertar el idioma cambia la pronunciación, el corte de palabras y las comillas.
Nombres y estado
- De dónde sale un nombre accesibleCuatro fuentes, y se pisan entre sí en un orden fijo.
- Nombres accesibles y estadoARIA llena los huecos donde el marcado por sí solo no alcanza.
- Estado que a ARIA hay que contarleCuando un control cambia otra cosa en la página, la relación tiene que quedar explícita.
- Anunciar un cambioUna región que se actualiza en silencio es una región que el usuario de lector nunca conoce.
Foco y visibilidad
- Orden de foco y tabindexHay tres valores de tabindex y solo dos son buena idea.
- Tres formas de ocultar algoOculto para el ojo, oculto para el lector, u oculto para ambos. Elige a propósito.
- Sacar una región de juegoCuando se abre un diálogo, todo lo que queda detrás debería dejar de ser alcanzable.
- Un diálogo que se porta bienEl diálogo nativo te da la trampa de foco, el fondo y Escape para cerrar.
Contenido que se lee bien
- Encabezados para una tabla complicadascope cubre el caso simple; headers cubre el que scope no puede expresar.
- Atributos dataDatos propios en un elemento, legibles desde CSS y desde scripts.
Bis
- accessible_table.htmlUna tabla de datos legible de verdad: caption, scopes, fila de resumen y texto que no es solo color.