Que es el Arbol de Accesibilidad?
Cada pagina web tiene un arbol DOM que el navegador construye a partir de tu HTML. De este DOM, el navegador tambien construye un arbol de accesibilidad; una estructura paralela reducida solo a la informacion que las tecnologias de asistencia necesitan. Esto incluye roles de elementos, nombres accesibles, estados y relaciones. Los lectores de pantalla y otras herramientas usan este arbol exclusivamente para presentar la pagina a los usuarios.
HTML-AAM: Como los Elementos se Mapean a Roles
La especificacion 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 tecnologias de asistencia sobre el proposito o funcion del elemento.
El Problema del Div Soup
Cuando los desarrolladores usan div y span para todo en lugar de elementos semanticos, el arbol 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 informacion a los usuarios de tecnologia de asistencia que dependen de ella.
Mejores Practicas para Marcado Semantico
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 imagenes tengan texto alt descriptivo y todos los controles de formulario tengan etiquetas asociadas. Prueba con lectores de pantalla reales ademas de herramientas automatizadas para detectar problemas que el analisis estatico no puede detectar.
