HTML semántico para accesibilidad

Cómo estructurar páginas con etiquetas semánticas para mejorar navegación, comprensión y mantenimiento.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Criterios prácticos para elegir etiquetas HTML con intención y no por costumbre.

Estructura de documento

Define regiones claras con header, nav, main, aside y footer para mejorar orientación.

Jerarquía de títulos

Usa h1-h6 en orden lógico para facilitar lectura rápida y navegación por encabezados.

Elemento correcto, función correcta

Enlace para navegar, botón para acción. Cambiarlos rompe expectativas y accesibilidad.

Listas y tablas cuando toca

No maquilles listas con div ni datos tabulares con grid sin semántica.

ARIA como apoyo

ARIA complementa; no sustituye el HTML nativo cuando existe elemento adecuado.

Beneficio técnico

Markup semántico facilita pruebas, mantenimiento y comprensión entre personas del equipo.

Aplicación en proyectos reales

Cómo pasar de layouts con div a estructuras que comunican intención real.

Empieza por identificar bloques de la interfaz: navegación, contenido principal, contenido complementario y acciones.

Sustituye contenedores genéricos por etiquetas semánticas solo cuando representen de verdad ese bloque.

Revisa siempre el resultado con inspector y recorrido de teclado para comprobar que la estructura guía la interacción.

Crea una plantilla base semántica para todas las páginas del proyecto.
Establece una regla de equipo sobre jerarquía de títulos por vista.
Incluye validación de HTML semántico en revisión técnica.
Corrige primero componentes reutilizados para maximizar impacto.

Patrón de código

Ejemplo de página mínima con landmarks y jerarquía de títulos coherente.

Layout semántico básico

<header>
  <h1>Revista Dev</h1>
</header>
<nav aria-label="Principal">
  <a href="#articulos">Artículos</a>
  <a href="#podcast">Podcast</a>
</nav>
<main id="articulos">
  <article>
    <h2>CSS con enfoque accesible</h2>
    <p>Contenido del artículo.</p>
  </article>
</main>