Cómo solucionar errores de accesibilidad usando aria-label en botones e iconos

Pequeños cambios que ayudan a pasar tests de accesibilidad y mejoran la experiencia de usuario

Cuando haces una auditoría con herramientas como Lighthouse, WAVE o axe DevTools, hay dos errores que aparecen constantemente en muchas webs: botones vacíos y enlaces con iconos sin texto accesible.

Es algo muy habitual, sobre todo cuando trabajamos con menús móviles, iconos sociales o botones hechos únicamente con Bootstrap Icons, Font Awesome o SVG.

La buena noticia es que, en muchos casos, la solución es muy sencilla: añadir correctamente aria-label.

Comparto dos ejemplos reales que he aplicado recientemente y que ayudan a eliminar este tipo de avisos rápidamente.

Error “Empty Button” en botones con iconos

Este error suele aparecer mucho en botones de menú hamburguesa o elementos que visualmente muestran un icono, pero no tienen texto legible para lectores de pantalla.

Por ejemplo, este botón funciona perfectamente a nivel visual:

<button class="btn p-0 border-0 d-xl-none" 
        type="button" 
        data-bs-toggle="offcanvas" 
        data-bs-target="#offcanvasMenu">
    <i class="bi bi-list fs-1"></i>
</button>

El problema es que un lector de pantalla no sabe qué hace ese botón. Para la herramienta de accesibilidad, está “vacío”.

La solución es añadir un aria-label describiendo la acción:

<button class="btn p-0 border-0 d-xl-none" 
        type="button" 
        data-bs-toggle="offcanvas" 
        data-bs-target="#offcanvasMenu"
        aria-controls="offcanvasMenu"
        aria-label="Abrir menú">
    <i class="bi bi-list fs-1"></i>
</button>

Con algo tan simple como esto:

• Desaparece el error “Empty Button”.
• El botón pasa a ser accesible.
• Los lectores de pantalla entienden su función.
• No afecta al diseño visual.

Enlaces con iconos sociales sin texto accesible

Otro caso muy típico aparece con los botones de compartir en redes sociales.

Muchas veces dejamos únicamente el icono:

<a href="https://x.com/intent/tweet?text=<?php echo urlencode($titlecompartir); ?>&url=<?php echo urlencode($urlcompartir); ?>" target="_blank">
    <i class="bi bi-twitter-x"></i>
</a>

Visualmente se entiende perfectamente que sirve para compartir en X, pero a nivel de accesibilidad el enlace no tiene descripción.

La solución vuelve a ser añadir un aria-label:

<a href="https://x.com/intent/tweet?text=<?php echo urlencode($titlecompartir); ?>&url=<?php echo urlencode($urlcompartir); ?>" 
   target="_blank" 
   rel="noopener noreferrer" 
   class="fs-3 mx-3 text-primary"
   aria-label="Compartir en X"
   title="Compartir en X">
    <i class="bi bi-twitter-x"></i>
</a>

En este caso, el lector de pantalla ya puede interpretar correctamente la acción del enlace.

¿title y aria-label hacen lo mismo?

Es una duda bastante habitual.

El atributo title puede mostrar un tooltip visual al pasar el ratón, pero no siempre es suficiente para accesibilidad.

En cambio, aria-label está pensado específicamente para tecnologías asistivas y lectores de pantalla.

Por eso, cuando usamos iconos sin texto visible, es recomendable utilizar ambos:

title="Compartir en X"
aria-label="Compartir en X"

Cuándo merece la pena usar aria-label

Yo suelo utilizarlo sobre todo en estos casos:

• Botones que solo tienen iconos.
• Menús hamburguesa.
• Botones flotantes.
• Iconos de compartir en redes sociales.
• SVG sin texto visible.
• Elementos interactivos donde la función no queda clara para lectores de pantalla.

Importante: no hay que abusar de aria-label

Si un botón ya tiene texto visible, normalmente no hace falta añadirlo.

Por ejemplo:

<button>Enviar formulario</button>

En ese caso el contenido ya es accesible y entendible.

Conclusión

Muchas veces pensamos que mejorar la accesibilidad implica hacer grandes cambios, pero no siempre es así.

Detalles tan pequeños como añadir correctamente un aria-label pueden ayudarte a:

• Pasar auditorías de accesibilidad.
• Mejorar la experiencia de usuarios con lectores de pantalla.
• Optimizar la calidad técnica de la web.
• Evitar errores frecuentes en Lighthouse o WAVE.

Son cambios rápidos de aplicar y que aportan mucho más valor del que parece.

Ponte Manos a la Web y aplica ya estos cambios!