Qué es el Arbol de Accesibilidad?
Cada página web tiene un árbol DOM que el navegador construye a partir de tu HTML. De este DOM, el navegador también construye un árbol de accesibilidad; una estructura paralela reducida solo a la información que las tecnologías de asistencia necesitan. Esto incluye roles de elementos, nombres accesibles, estados y relaciones. Los lectores de pantalla y otras herramientas usan este árbol exclusivamente para presentar la página a los usuarios.
HTML-AAM: Como los Elementos se Mapean a Roles
La especificación HTML Accessibility API Mappings define como cada elemento HTML se mapea a un rol de accesibilidad. Por ejemplo, header se convierte en banner, nav se convierte en navigation y button mantiene su rol de button. Elementos genericos como div y span se mapean al rol generic, que no dice nada a las tecnologías de asistencia sobre el propósito o función del elemento.
El Problema del Div Soup
Cuando los desarrolladores usan div y span para todo en lugar de elementos semánticos, el árbol de accesibilidad resultante es plano y sin significado. Los usuarios de lectores de pantalla no pueden saltar entre landmarks, encontrar encabezados ni navegar listas. La apariencia visual puede ser identica, pero la estructura subyacente no proporciona información a los usuarios de tecnología de asistencia que dependen de ella.
Mejores Prácticas para Marcado Semántico
Usa elementos HTML nativos que llevan roles ARIA implicitos siempre que sea posible. Reserva los atributos ARIA para casos donde no existe un elemento nativo. Asegurate de que todos los landmarks tengan nombres accesibles, todas las imágenes tengan texto alt descriptivo y todos los controles de formulario tengan etiquetas asociadas. Prueba con lectores de pantalla reales además de herramientas automatizadas para detectar problemas que el análisis estatico no puede detectar.
