El uso de HTML semántico es uno de los pilares fundamentales para mejorar la accesibilidad de los sitios web. Este capítulo se centrará en cómo las etiquetas semánticas ayudan a estructurar el contenido de manera lógica, lo que facilita su comprensión y navegación tanto para los usuarios como para las tecnologías asistivas.

¿Qué es HTML semántico?

HTML semántico se refiere al uso de etiquetas que tienen un significado claro sobre el contenido que envuelven. Por ejemplo, etiquetas como <header>, <article> y <footer> no solo ayudan a los desarrolladores a entender el propósito de cada sección, sino que también permiten a los lectores de pantalla y otros dispositivos identificar correctamente las partes de una página.

Beneficios del HTML semántico para la accesibilidad

• Mejor comprensión para lectores de pantalla: Las etiquetas semánticas permiten que los usuarios naveguen por el contenido de manera más eficiente.
• Navegación mejorada: Facilita la creación de puntos de referencia claros en la página, como encabezados y secciones.
• Compatibilidad con tecnologías asistivas: Proporciona un marco estructural que estas herramientas pueden interpretar fácilmente.

Ejemplo de estructura semántica básica:

html

Uso adecuado de encabezados

Los encabezados (<h1> a <h6>) son esenciales para organizar el contenido jerárquicamente. Un uso correcto mejora tanto la navegación como la experiencia general del usuario.

Ejemplo de jerarquía de encabezados:

html

Roles y áreas de referencia con HTML semántico

Algunas etiquetas semánticas tienen roles implícitos que las tecnologías asistivas reconocen automáticamente. Por ejemplo:

• <header>: Marca la cabecera de la página o sección.
• <main>: Define el contenido principal de la página.
• <footer>: Indica el pie de página.

Además, estas etiquetas eliminan la necesidad de roles ARIA adicionales en muchos casos, simplificando el código y mejorando la robustez.

Ejemplo de uso de roles implícitos:

html

Evitar etiquetas no semánticas

El uso de etiquetas genéricas como <div> o <span> debe limitarse a casos en los que no haya una alternativa semántica disponible. Estas etiquetas carecen de significado intrínseco, lo que puede dificultar la comprensión y navegación.

Ejemplo de etiqueta no semántica vs etiqueta semántica:

html

Conclusión

HTML semántico no solo mejora la accesibilidad, sino que también promueve un código más limpio y fácil de mantener. Su implementación es una forma simple pero poderosa de hacer que los sitios web sean más inclusivos.

En el próximo capítulo, exploraremos cómo crear formularios accesibles para garantizar que todos los usuarios puedan interactuar fácilmente con ellos. ¡Sigue con nosotros!