Etiquetas Semánticas en HTML 5
Las etiquetas semánticas en HTML son fundamentales para que los navegadores y las tecnologías de asistencia, como los lectores de pantalla, puedan interpretar correctamente el contenido. Utilizar etiquetas semánticas adecuadas facilita la navegación y mejora la experiencia para usuarios con discapacidades. Además, el cumplimiento de los criterios de conformidad de la WCAG 2.2, como el Criterio 1.3.1 (Perceptible - Información y Relaciones) o el Criterio 2.4.6 (Operable - Encabezados y Etiquetas), asegura que el contenido sea estructurado de manera significativa para todos los usuarios.
Ejemplos de Etiquetas Semánticas
Los encabezados (<h1>, <h2>, <h3>, etc.) ayudan a los usuarios a comprender la estructura del contenido. Por ejemplo:
<article>
<h1>Introducción a la Accesibilidad Web</h1>
<section>
<h2>¿Por qué es importante?</h2>
<p>La accesibilidad web asegura que todas las personas puedan utilizar la web sin barreras.</p>
</section>
</article>Tenemos otro conjunto de etiquetas que ayudan a definir la estructura general de la página, como <header>, <footer>, <nav> y <main>. Por ejemplo:
<header>
<h1>Bienvenidos a Mi Blog</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#articulos">Artículos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Artículos Recientes</h2>
<p>Contenido del artículo...</p>
</section>
</main>Estas etiquetas permiten una navegación más eficiente para los usuarios de lectores de pantalla, ya que pueden saltar rápidamente a las secciones principales del contenido.
El uso de etiquetas semánticas está alineado con el Criterio 2.4.1 (Operable - Evitar Bloques), ya que ayuda a los usuarios a saltar directamente al contenido relevante sin tener que navegar por secciones irrelevantes. Esto es lo que denominamos landmarks o puntos de referencia, que permiten a los usuarios de tecnologías de asistencia navegar de manera más eficiente por la página.