HTML Semántico y su importancia en la accesibilidad

Si alguna vez te has preguntado por qué algunos desarrolladores insisten tanto en usar etiquetas HTML específicas cuando aparentemente todas hacen lo mismo visualmente, ¡has llegado al lugar correcto!

En este artículo vamos a hablar sobre HTML semántico y accesibilidad, dos conceptos que, aunque suenan técnicos, en este artículo los abordaremos de una sencilla para que lo puedas comprender.

Árbol de accesibilidad

Cuando un navegador renderiza una web, crea dos estructuras principales: el DOM (Document Object Model) que los desarrolladores conocemos, y el árbol de accesibilidad.

El árbol de accesibilidad es una versión simplificada del DOM que contiene información sobre el rol, nombre, estado y otras propiedades de cada elemento. Sirve para determinar cómo las tecnologías de asistencia (como lectores de pantalla) interpretan el contenido de una web.

Veamos cómo funciona esto de manera sencilla. Imaginemos que tenemos el siguiente elemento:

El DOM cuando se renderiza el botón, es el siguiente:

<button>
  Añadir a la cesta
</button>

Y el árbol de accesibilidad (AOM) generado es el siguiente:

Como puedes observar, el árbol de accesibilidad proporciona tres elementos clave: rol, nombre y estado. En este caso, el rol "button", el nombre "Añadir a la cesta" y estado por defecto.

Esta información es la que utilizan las tecnologías de asistencia para interpretar el contenido de una página web. Una tecnología de asistencia como un lector de pantalla (en este caso VoiceOver), interpreta este contenido de la siguiente manera:

HTML semántico y su importancia

Para entender por qué el HTML semántico importa tanto, veamos cómo afecta al árbol de accesibilidad con un ejemplo sencillo:

<div class="header">
  <div class="title">Mi Blog Personal</div>
</div>
<div class="navigation">
  <div class="nav-item" onclick="goToHome()">Inicio</div>
  <div class="nav-item" onclick="goToArticles()">Artículos</div>
</div>
<div class="content">
  <div class="article-title">Mi primer artículo</div>
  <div class="article-text">Este es el contenido de mi artículo...</div>
</div>

El elemento HTML <div> es un tipo de elemento genérico para el contenido. No tiene efecto semántico ni visual. Normalmente, en la construcción de sitios web modernos se abusa de él, ya que es una etiqueta muy cómoda para aplicar con CSS.

A esto se le conoce como div soupo divitis.Antes de ver de analizar la importancia del HTML semántico en este contenido, veamos cómo podría verse a nivel visual este contenido.

A simple vista, parece que no hay ningún problema, todo parece estar bien. Ahora vemos el árbol de accesibilidad generado:

¿Ves el problema? Todo se marca como "StaticText", es decir, aunque visualmente "Mi Blog Personal" es un título, el árbol de accesibilidad no entiende que es un título porque en HTML no lo hemos indicado de ninguna manera.

Ahora vamos a ver como este código lo interpreta una tecnología de asistencia como un lector de pantalla:

Cómo has podido escuchar, solo menciona el texto sin ninguna contextualización más. Ahora imagina que una persona ciega usa el lector de pantalla y se encuentra con esto, ¿cómo reconoce que "Inicio" y "Artículos" son enlaces? ¿cómo reconoce que "Mi blog personal" es un encabezado? lo tendría complicado, ¿no?.

Pero, ¿cuál es la solución a este problema? el HTML semántico. Como hemos visto antes en el ejemplo del "botón", hay que darle al árbol de accesibilidad la suficiente información como para que la tecnología de asistencia pueda interpretar el contenido de la mejor manera posible. 

Vamos a ver qué pasa cuando etiquetamos el código anterior con etiquetas de HTML que sí proporcionan semántica:

<header class="ejemplo-2-header">
  <h1 class="ejemplo-2-title">Mi Blog Personal</h1>
</header>
<nav class="ejemplo-2-navigation" aria-label="Principal">
  <a class="ejemplo-2-nav-item" href="#">Inicio</a>
  <a class="ejemplo-2-nav-item" href="#">Artículos</a>
</nav>
<main class="ejemplo-2-content">
  <article>
    <h2 class="ejemplo-2-article-title">Mi primer artículo</h2>
    <p class="ejemplo-2-article-text">Este es el contenido de mi artículo...</p>
  </article>
</main>

Lo primero que estarás preguntando al ver este código es, ¿cómo sabemos qué etiquetas semánticas existen y para qué?, bueno, aquí no hay otra ciencia que ir aprendiéndolas, pero te dejo un Cheatseet de etiquetas HTML semánticas y su propósito que seguro que te será de gran ayuda.

En este código hemos hecho uso de:

• header para indicar que el contenido es un banner.

• h1 para indicar que es un título.

• nav para indicar que es un bloque de navegación.

• a para indicar que los elementos son enlaces.

• main para indicar que es el contenido principal de la página.

• article para indicar que ese contenido es parte de un artículo.

• h2 para indicar que es un subtítulo.

• p para indicar que es un párrafo.

El código corregido con las etiquetas semánticas de HTML correctas genera el siguiente árbol de accesibilidad:

Ahora veamos cómo interpreta este árbol un lector de pantalla:

¿Ves la diferencia? hemos conseguido que haciendo un código HTML semántico el lector de pantalla sea capaz de interpretar en contenido de manera mucho más clara y comprensible; ahora los enlaces se pronuncia bien, junto a los encabezamientos, las secciones y el resto de elementos.

HTML semántico y la interacción por teclado

Otra de las características que nos da HTML semántico es la navegación e interacción por teclado de manera implícita.

Por ejemplo, un enlace creado con <div>:

Con un código cómo el siguiente: 

<div>Inicio</div>

No será alcanzable por navegación con teclado, lo cual es fundamental para la accesibilidad. Lo puedes comprobar tú mismo navegando con las teclas Tab para avanzar hacia el siguiente elemento interativo de la página y con Shift + Tab para volver al anterior elemento interactivo. Verás que nunca llegarás alcanzar el enlace que acabamos de crear "Inicio".

En cambio, si este mismo elemento lo hacemos con su equivalente semántico, es decir, con <a>, el elemento si será alcanzable por teclado y, por lo tanto, aquellos usuarios que usen sólo navegación por teclado podrán interactuar con él.

Prueba tú mismo a alcanzar ahora el enlace en esta versión donde hacemos uso de la etiqueta <a>:

Además, otro aspecto importante del teclado es la interacción de los elementos solo con teclado. En el caso del enlace, si pulsamos Enter cuando tenemos el elemento enfocado, este se debería navegar a la URL del enlace al igual que si le hiciéramos clic con el ratón. Si pulsamos Ctrl + Enter, debería navegar a la URL del enlace en una nueva pestaña, etc.

Todas estás interacciones con teclado pueden suponer cierta complejidad hacerlas con Javascript, no obstante, las etiquetas semánticas te las dan a coste cero, es decir, de manera implícita.

Conclusión

HTMl semántico además de lo visto anteriormente da otro tipo de beneficios. ¿Quieres descubrir todo lo que nos da HTML semántico y aprender desde cero? Hoy, viernes 28 de marzo de 2025, vamos a hacer un taller especial de HTML Semántico para diseñadores, donde descubrirás todos los secretos de HTML semántico y cómo usarlo de manera correcta.