Cómo usar div y span de manera accesible en HTML

Usar divs o spans no son acciones malas en sí mismas, pero mal usados pueden complejizar la interpretación del contenido para personas que utilizan tecnologías asistivas para navegar la web. Acá te explico como evitar problemas comunes y usarlos a tu favor.

Errores comunes

Los elementos div y span:

  • no son semánticos, por lo que las tecnologías de apoyo no les asignan una intención o comportamiento por default.
  • no sirven para estructurar contenido como si sucede con navbar, main o footer que sirven para guiar la navegación.

Esto implica que, aunque visualmente les demos estilo de botón, card u otro elemento, semánticamente para las tecnologías asistivas no hacen nada y por eso debemos buscar maneras para subsanar dicha cuestión. Yendo a un ejemplo concreto, veamos como difiere en el resultado un botón semántico versus un div. El código de un botón con HTML semántico se verá:

<button name="button">
  Click Me!
</button>

Dicho código HTML automáticamente se verá:

El botón por defecto ya tendrá estados como: focus, hover, etc y las tecnologías asistivas lo reconocerán como elemento interactivo

En cambio un div en código se verá:

<div>
  Click Me!
</div>

Y en el navegador se verá:

Texto plano sin estilos ni comportamiento

Entonces, ¿por qué hacer todo tan complejo cuando podemos usar la etiqueta semántica correspondiente?

Cómo usarlos correctamente

Hay 2 maneras de usarlos de manera que ayuden a la interpretación correcta del contenido:

  1. para dar estilos visuales complementándolos con estilos de CSS. El div nos sirve para generar un bloque de contenido y el span para agrupar textos en línea. Por ejemplo, en un form, podemos usar divs para agrupar label e input y darle estilos, de manera que trabajamos visualmente y el lector de pantalla solo lea el contenido del interior del div.
  2. para generar componentes personalizados. En este caso, es clave complementarlo correctamente con roles y atributos de ARIA para que las tecnologías de apoyo puedan comunicar efectivamente su propósito. Siguiendo con el ejemplo, si por algún motivo no podemos usar la etiqueta HTML button, siempre podemos crear un div con los atributos que le den las mismas propiedades (estilos visuales, aria para que sea leído por tecnologías asistivas y javascript para darle el comportamiento necesario).

Construir una web accesible es fundamental para que la mayor cantidad de personas puedan acceder a nuestro contenido y para lograrlo es necesario el correcto uso de las etiquetas HTML.