TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Un botón cuyo único contenido visual es un icono (como un SVG o una fuente de iconos) debe tener obligatoriamente un nombre programático mediante aria-label o texto oculto visualmente. De lo contrario, un lector de pantalla solo anunciará "Botón", dejando a la persona usuaria ciego ante la función real del control.
La epidemia de los botones minimalistas
El diseño moderno abusa de la estética limpia, reemplazando palabras por iconos de lupa (buscar), sobre (correo) o barras (menú). Si estos iconos se insertan directamente dentro de un <button> sin proveer texto alternativo, se infringe radicalmente el Criterio 4.1.2 (Nombre, Función, Valor), categorizado como Crítico.
El patrón erróneo: Código Accesible Deficiente
Este botón depende enteramente de que la persona usuaria vea e interprete gráficamente el icono SVG.
<!-- MAL: Botón sin Nombre Accesible (Accessible Name) -->
<button class="btn-icon" onclick="sendMail()">
<svg class="icon-envelope" viewBox="0 0 24 24">...</svg>
</button>La Solución Accesible: Código Recomendado
La inyección del atributo aria-label en el botón resuelve el problema. Opcionalmente, se usa aria-hidden="true" en el SVG para asegurar que algunos navegadores antiguos no intenten leer las trazas del vector.
<!-- BIEN: Botón etiquetado programáticamente -->
<button class="btn-icon" onclick="sendMail()" aria-label="Enviar correo electrónico">
<svg aria-hidden="true" class="icon-envelope" viewBox="0 0 24 24">...</svg>
</button>Matriz de Soporte empírico
| Lector de Pantalla | Comportamiento sin aria-label | Comportamiento con aria-label |
|---|---|---|
| NVDA | Lee "Botón". (En algunos SVG complejos puede intentar leer el ID del path). | Lee "Enviar correo electrónico, Botón". |
| VoiceOver (iOS) | Lee "Botón, atenuado" o simplemente no detecta etiqueta. | Lee "Enviar correo electrónico, botón". |
Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar B para saltar entre botones. Si un botón de icono SVG carece de aria-label, NVDA anunciará "Botón" en seco. Con el atributo correcto, anunciará "Enviar correo electrónico, botón". En TalkBack (Android), el mismo resultado se verifica al hacer doble tap.
Inspección del Árbol de Accesibilidad
En Chrome DevTools → panel Accessibility, verificar que el Name (Accessible Name) del botón NO esté vacío. Si el SVG tiene aria-hidden="true", confirmar que el nombre proviene del aria-label del botón padre.
Herramientas Automatizadas
Axe DevTools: la regla button-name es la más efectiva para este caso, detectando botones cuyo Accessible Name está vacío. WAVE marca estos controles como "Button is empty". Limitación: Si el SVG contiene un <title> interno, algunas herramientas pueden reportar un falso negativo por interpretar incorrectamente el nombre.
