El error de accesibilidad que todos cometemos en el HTML ⚠️
Muchos desarrolladores creen que ser redundantes es ser claros. Pero en el mundo de la accesibilidad (a11y), el exceso de información es simplemente ruido. El problema es simple: cuando etiquetamos un elemento como "Nav
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Muchos desarrolladores creen que ser redundantes es ser claros. Pero en el mundo de la accesibilidad (a11y), el exceso de información es simplemente ruido.
- El problema es simple: cuando etiquetamos un elemento como "Navegación Principal", el lector de pantalla anuncia: "Navegación, Navegación Principal".
- Es una redundancia innecesaria que entorpece la experiencia del usuario y añade carga cognitiva sin aportar valor.
- El insight clave es entender que la semántica de HTML5 ya hace el trabajo pesado por nosotros. No necesitamos describir el elemento, sino su propósito.
Bloque 1
Muchos desarrolladores creen que ser redundantes es ser claros. Pero en el mundo de la accesibilidad (a11y), el exceso de información es simplemente ruido.
El problema es simple: cuando etiquetamos un elemento como "Navegación Principal", el lector de pantalla anuncia: "Navegación, Navegación Principal".
Bloque 2
Es una redundancia innecesaria que entorpece la experiencia del usuario y añade carga cognitiva sin aportar valor.
El insight clave es entender que la semántica de HTML5 ya hace el trabajo pesado por nosotros. No necesitamos describir el elemento, sino su propósito.
Bloque 3
Reglas de oro para un código más limpio y accesible:
• Elimina la palabra "navegación" de tus labels de : el lector ya sabe que es un landmark de navegación. • No escribas "imagen de..." en el texto alternativo (alt text): el software ya anuncia que es una imagen. • Sé sucinto: el texto accesible no debe ser una novela, debe ser directo y eficiente.
Bloque 4
Pequeños ajustes en la semántica transforman la navegación de miles de personas. En accesibilidad, menos es definitivamente más.
¿Ustedes cómo están manejando la redundancia en sus etiquetas ARIA y semántica HTML?