Los iconos accesibles en HTML no dependen solo de si un icono se ve bonito o encaja visualmente en la interfaz. La clave está en entender si ese icono es decorativo, informativo o funcional, porque cada caso necesita un tratamiento distinto en accesibilidad web.
Un icono decorativo puede ocultarse a las tecnologías de asistencia con aria-hidden="true" cuando no aporta información nueva. En cambio, un icono funcional, como un botón de búsqueda, favoritos o cerrar ventana, necesita un nombre accesible que explique claramente qué acción realiza.
El problema aparece cuando usamos iconos sin texto visible y damos por hecho que todas las personas van a entenderlos igual. Para una persona que navega con lector de pantalla, teclado o tecnologías de asistencia, un icono sin nombre puede convertirse en un botón mudo, ambiguo o directamente inútil.
En este artículo vamos a ver cómo crear iconos accesibles en HTML, cuándo usar aria-hidden, cuándo añadir aria-label o texto oculto, y qué errores conviene evitar cuando trabajas con iconos decorativos, enlaces, botones e interfaces sin texto visible.
Iconos accesibles en HTML: reglas básicas
Antes de tocar ARIA, conviene separar tres tipos de iconos. Esta clasificación ayuda a decidir si el icono debe ocultarse, describirse o convertirse en parte del nombre accesible del componente.
En accesibilidad web, un icono sin texto puede ser:
- ruido, si es decorativo y el lector de pantalla lo anuncia sin aportar nada;
- una barrera, si es un control interactivo y no tiene nombre accesible;
- una trampa de UX, si obliga a la persona a “adivinar” qué hace.
La clave no es poner aria-hidden porque sí ni añadir aria-label a todo. La clave es entender qué papel cumple ese icono y qué necesita el árbol de accesibilidad para que la experiencia sea coherente.
Qué “ve” la accesibilidad cuando tú ves un icono
Visualmente, un icono puede parecer evidente. Una lupa suele representar buscar, una papelera eliminar y una equis cerrar. Pero esa interpretación depende del contexto, de la experiencia previa y de la capacidad de ver el icono.
Para un lector de pantalla, lo importante no es la forma visual, sino el nombre accesible del elemento. Si un botón solo contiene un SVG sin texto, puede terminar anunciándose como “botón” sin más información. Y un botón que solo dice “botón” no ayuda a tomar decisiones.
Esto también afecta a la navegación con teclado. Si un control recibe foco, la persona usuaria necesita saber qué acción activa antes de pulsar Enter o Espacio. Por eso, cuando hablamos de focus visible y navegación con teclado, también hablamos de nombres accesibles claros.
Iconos accesibles en HTML: cuándo usar aria-hidden
aria-hidden="true" sirve para ocultar un elemento del árbol de accesibilidad. Es útil cuando el icono es puramente decorativo o cuando repite una información que ya aparece como texto visible.
Un caso típico sería un botón que tiene texto visible y un icono de apoyo:
<button type="button">
<svg aria-hidden="true" focusable="false">
...
</svg>
Guardar cambios
</button>En este ejemplo, el icono no necesita anunciarse porque el texto “Guardar cambios” ya comunica la acción. El SVG acompaña visualmente, pero no añade información nueva.
También puedes usar aria-hidden="true" en iconos decorativos dentro de enlaces, tarjetas o mensajes de estado, siempre que el contenido importante esté disponible como texto.
Cuándo no deberías usar aria-hidden
No uses aria-hidden="true" en elementos interactivos ni en elementos que puedan recibir foco. Si ocultas un botón, un enlace o un control de formulario del árbol de accesibilidad, puedes crear una experiencia confusa: el elemento puede seguir siendo visible o incluso enfocable, pero quedar sin significado para tecnologías de asistencia.
Como referencia técnica, puedes consultar la documentación de MDN sobre aria-hidden, donde se explica que este atributo debe reservarse para contenido no interactivo o redundante.
Cuándo necesitas un nombre accesible
Un icono necesita nombre accesible cuando representa una acción, un destino o una información que no aparece escrita en pantalla. Esto ocurre mucho en botones de interfaz, barras de herramientas, cards, navegación móvil o acciones rápidas.
Por ejemplo, este botón no es suficiente:
<button type="button">
<svg>
...
</svg>
</button>Visualmente puede parecer un botón de búsqueda, pero para algunas tecnologías de asistencia no hay una acción clara. Una opción mejor sería:
<button type="button" aria-label="Buscar">
<svg aria-hidden="true" focusable="false">
...
</svg>
</button>En este caso, el botón tiene un nombre accesible claro: “Buscar”. El icono se oculta porque no necesita anunciarse por separado.
En los iconos accesibles en HTML, el nombre accesible debe describir la acción, no la forma del dibujo. No escribas “lupa” si la acción real es “Buscar”. No escribas “corazón” si la acción real es “Añadir a favoritos”. No escribas “equis” si la acción real es “Cerrar”.
Ejemplos de buenos nombres accesibles
aria-label="Buscar"aria-label="Cerrar menú"aria-label="Eliminar producto"aria-label="Añadir a favoritos"aria-label="Abrir opciones de usuario"
La guía de WAI sobre imágenes funcionales también insiste en esta idea: cuando una imagen o icono inicia una acción, el texto alternativo debe comunicar esa acción.
Aria-label, texto oculto o texto visible: qué elegir
Hay varias formas de dar nombre accesible a un icono funcional. La mejor opción depende del diseño y del contexto.
Opción 1: texto visible
Siempre que puedas, el texto visible suele ser la opción más clara. Beneficia a todo el mundo: personas que usan lector de pantalla, personas con baja visión, personas con dificultades cognitivas y personas que simplemente no reconocen el icono.
<button type="button">
<svg aria-hidden="true" focusable="false">
...
</svg>
Eliminar
</button>Esta opción es especialmente recomendable en acciones delicadas, como eliminar, cancelar, pagar o enviar información.
Opción 2: aria-label
aria-label puede ser útil cuando el diseño solo permite mostrar un icono. Es habitual en botones compactos, barras de herramientas o controles repetidos.
<button type="button" aria-label="Cerrar ventana">
<svg aria-hidden="true" focusable="false">
...
</svg>
</button>Eso sí: úsalo con intención. El valor de aria-label debe ser claro, breve y específico.
Opción 3: texto oculto visualmente
Otra opción es incluir texto real en el HTML y ocultarlo visualmente con una clase de utilidad. Esta técnica puede ser muy útil cuando quieres mantener una etiqueta textual en el marcado.
<button type="button">
<svg aria-hidden="true" focusable="false">
...
</svg>
<span class="sr-only">Abrir menú</span>
</button>.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Este enfoque funciona bien cuando quieres conservar contenido textual sin cambiar el diseño visual.
Checklist de decisión: aria-hidden vs nombre accesible
Cuando tengas dudas, puedes usar esta pequeña checklist antes de implementar un icono:
- ¿El icono solo decora y no añade información? Usa
aria-hidden="true". - ¿El icono repite un texto visible cercano? Normalmente puedes ocultarlo con
aria-hidden="true". - ¿El icono representa una acción? Necesita nombre accesible.
- ¿El icono está dentro de un botón o enlace sin texto visible? Necesita nombre accesible.
- ¿El icono comunica estado o información importante? No lo ocultes sin ofrecer alternativa textual.
- ¿El elemento recibe foco? No lo escondas con
aria-hidden.
Esta checklist te ayudará a crear iconos accesibles en HTML sin caer en dos errores habituales: anunciar iconos decorativos que no aportan nada u ocultar iconos funcionales que sí necesitan explicación.
Casos comunes donde se rompe la accesibilidad
Los problemas con iconos sin texto suelen aparecer en componentes muy cotidianos. Precisamente por eso conviene revisarlos con lupa.
Botón de cerrar
Un botón de cerrar con una equis visual necesita un nombre accesible:
<button type="button" aria-label="Cerrar modal">
<svg aria-hidden="true" focusable="false">
...
</svg>
</button>No basta con que el icono “parezca” una equis. La acción debe estar disponible de forma programática.
Botón de favoritos
En un botón de favoritos, el nombre accesible debería reflejar el estado o la acción disponible:
<button type="button" aria-label="Añadir a favoritos">
<svg aria-hidden="true" focusable="false">
...
</svg>
</button>Si el elemento ya está guardado, podrías cambiar el nombre a “Quitar de favoritos”.
Iconos en formularios
Los iconos dentro de campos de formulario también pueden generar confusión. Un icono de error no debería ser la única pista de que algo ha fallado. El mensaje debe estar escrito, ser claro y estar asociado correctamente al campo.
Si estás trabajando este tema, te recomiendo complementar este post con la guía sobre formularios accesibles, labels, errores y validación.
Iconos en menús, dropdowns y combobox
En componentes desplegables, los iconos suelen indicar apertura, cierre, estado o selección. Pero no deberían sustituir a una semántica correcta ni a un patrón bien elegido.
Si tienes dudas entre menú, select o combobox, puedes revisar la guía sobre dropdown, select y combobox accesibles, porque cada patrón tiene un comportamiento y unas expectativas diferentes.
Errores comunes al crear iconos accesibles en HTML
Estos son algunos errores que conviene evitar cuando trabajas con iconos accesibles en HTML:
- Usar
aria-hidden="true"en un botón o enlace interactivo. - Dejar un botón de solo icono sin
aria-labelni texto oculto. - Describir la forma del icono en lugar de la acción.
- Usar el mismo
aria-labelpara acciones diferentes. - Confiar solo en el color o en el icono para comunicar estados.
- Ocultar información importante sin ofrecer alternativa textual.
Muchos de estos errores no se ven a simple vista. La interfaz puede parecer correcta en diseño, pero fallar cuando se navega con teclado, lector de pantalla o herramientas de auditoría.
Cómo testear iconos accesibles sin complicarte
Para revisar si tus iconos están bien planteados, puedes hacer varias pruebas sencillas:
- Navega solo con teclado y comprueba si todos los controles se entienden al recibir foco.
- Usa el inspector de accesibilidad del navegador para revisar el nombre accesible de cada botón.
- Prueba con VoiceOver, NVDA o el lector de pantalla que tengas disponible.
- Revisa si los iconos decorativos aparecen innecesariamente en el árbol de accesibilidad.
- Comprueba que los botones de solo icono anuncian una acción clara.
Si un botón solo se anuncia como “botón”, algo falta. Si un icono decorativo se anuncia como “imagen” sin aportar información, probablemente sobra en el árbol de accesibilidad.
Preguntas frecuentes sobre iconos accesibles en HTML
¿Todos los iconos necesitan aria-label?
No. Los iconos decorativos no necesitan aria-label. De hecho, muchas veces es mejor ocultarlos con aria-hidden="true". Solo los iconos que comunican una acción, un estado o una información importante necesitan una alternativa textual.
¿Es mejor usar aria-label o texto oculto?
Depende del caso. aria-label es práctico en botones de solo icono. El texto oculto visualmente puede ser más flexible cuando quieres conservar texto real dentro del HTML. Si puedes mostrar texto visible, normalmente será la opción más clara.
¿Puedo usar title para explicar un icono?
No lo usaría como solución principal. El atributo title no siempre se anuncia de forma consistente y no funciona igual en dispositivos táctiles. Para botones de solo icono, es mejor usar texto visible, texto oculto o aria-label.
Cuando lo bonito sale caro
Los iconos pueden mejorar una interfaz, hacerla más escaneable y reducir ruido visual. Pero también pueden crear barreras si sustituyen a textos necesarios o si se implementan sin pensar en accesibilidad.
Crear iconos accesibles en HTML no significa llenar todo de ARIA. Significa tomar mejores decisiones: ocultar lo decorativo, nombrar lo funcional y asegurarse de que cada persona pueda entender qué está pasando y qué acción puede realizar.
La próxima vez que añadas un icono sin texto, no te preguntes solo si queda bien. Pregúntate también si se entiende, si se anuncia correctamente y si ayuda de verdad dentro del flujo completo.
