Warning Enlace o botón sin texto accesible
Por qué un <a> o <button> sin texto, aria-label o una imagen con alt dentro no anuncia nada a un lector de pantalla.
El validador marca cualquier <a href> o <button> sin texto visible, sin aria-label ni aria-labelledby, y sin ninguna imagen hija que lleve un texto alt real.
Ejemplo
<!-- Incorrecto: botón solo con ícono, nada que un lector de pantalla pueda anunciar -->
<button><svg>...</svg></button>
<!-- Correcto: con etiqueta -->
<button aria-label="Cerrar diálogo"><svg>...</svg></button>
<!-- También correcto: una imagen con texto alt real cuenta como contenido accesible -->
<a href="/"><img src="/logo.png" alt="Inicio"></a>Por qué importa
Los botones solo con ícono y los enlaces con imagen son comunes en interfaces reales — un botón de cerrar, un botón de menú hamburguesa, un logo que enlaza al inicio — y es fácil publicar uno sin texto alguno, ya que se ve perfectamente bien visualmente. Un lector de pantalla no tiene nada que leer en voz alta para un control genuinamente vacío: típicamente anuncia solo "botón" o "enlace" sin ninguna indicación de qué hace, o en algunos casos nada utilizable en absoluto. Los usuarios videntes que confían en la forma del ícono nunca notan este vacío, que es exactamente por qué es un error de accesibilidad común y fácil de pasar por alto.
Frequently asked questions
¿Un ícono dentro del botón cuenta como texto accesible?
No por sí solo — un SVG en línea o un glifo de fuente de íconos no tiene contenido de texto que un lector de pantalla pueda leer. Se necesita un aria-label en el botón, o una <img> con un atributo alt real adentro, para darle al control un nombre accesible.
¿Qué pasa si el botón es genuinamente decorativo y no hace nada?
Si un control no tiene ninguna función, no debería ser un <button> ni un <a> en absoluto — usa un elemento no interactivo en su lugar. Los elementos interactivos siempre deberían tener un propósito claro que se pueda comunicar a todos los usuarios.