TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si un botón dice "Enviar" visualmente, pero internamente tiene un aria-label="Botón 1", el software de dictado por voz fallará cuando la persona usuaria diga "Haz clic en Enviar". El nombre programático debe coincidir (o al menos comenzar) con el texto visual.
La desconexión entre lo visual y el DOM
El Criterio 2.5.3 Etiqueta en el Nombre protege a las personas usuarias de control por voz (como Dragon NaturallySpeaking o Voice Control). Si sobreescribimos el texto interno de un botón con un atributo ARIA que no contiene la palabra visual, rompemos la sincronización.
El patrón erróneo: Código Accesible Deficiente
La persona usuaria de comandos de voz intentará activar el botón diciendo "Clic Confirmar Pago", pero el sistema no encontrará ningún botón con ese nombre programático.
<!-- MAL: aria-label sobreescribe y contradice el texto visual -->
<button aria-label="Procesar transacción de tarjeta">
Confirmar Pago
</button>La Solución Accesible: Código Recomendado
El texto visible debe ser parte íntegra del nombre programático, preferiblemente al inicio de la cadena de texto.
<!-- BIEN: El texto visual está incluido en el aria-label -->
<button aria-label="Confirmar Pago de transacción con tarjeta">
Confirmar Pago
</button>
<!-- BIEN: Simplemente confiar en el texto interno nativo -->
<button>
Confirmar Pago
</button>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar B para saltar entre botones. Verificar que cada botón anuncie un nombre descriptivo (no solo "Botón"). En TalkBack (Android), navegar mediante swipe y confirmar que el anuncio incluya el propósito del control.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.5.3.
Herramientas Automatizadas
Ejecutar Axe DevTools o WAVE sobre la vista afectada. Buscar violaciones relacionadas con el criterio WCAG 2.5.3. Complementar con una auditoría manual para los aspectos que las herramientas automatizadas no pueden verificar (interacción dinámica, calidad del contenido).
