Estuve probando cómo NVDA asigna nombres accesibles a radio buttons cuando el contenido visible es solo un ícono SVG (caso típico: estrellas de calificación).
Probé 5 combinaciones en modo exploración, parándome directamente en el input:
- V1 – aria-label en input + label for (sin texto, solo SVG) → Firefox: no anuncia / Chrome: sí anuncia
- V2 – Sin aria-label + label for con texto sr-only → Firefox: no anuncia / Chrome: sí anuncia
- V3 – Label envolviendo el input, con texto sr-only → Firefox: no anuncia / Chrome: sí anuncia
- V4 – aria-label en input + label NO asociado → Firefox: sí anuncia / Chrome: sí anuncia
- V5 – aria-label en input + label for con texto sr-only → Firefox: no anuncia / Chrome: sí anuncia
Importante: Revisando en DevTools de ambos navegadores, los nombres accesibles están correctamente computados en todos los casos. El problema no es de cómputo, sino de cómo NVDA+Firefox expone esa información en modo exploración.
Hallazgos
En NVDA + Firefox, el único caso que anuncia el nombre accesible en el input es cuando el label no está asociado (V4). En NVDA + Chrome, todos funcionan correctamente.
En Firefox, cuando existe un label asociado (por for o wrapping), NVDA delega el nombre al elemento label y no lo anuncia en el input, incluso si hay un aria-label presente.
Conclusión
NVDA+Firefox tiene un problema al obtener los nombres accesibles de inputs con label asociado en modo exploración, a pesar de que están bien computados en el accessibility tree. Usar aria-label sin asociar el label es la combinación que funciona consistentemente en ambos navegadores.
Esto aplica a modo exploración. En modo foco (Tab) el comportamiento es correcto.
¿Obtienen los mismos resultados? ¿Cómo se comporta con JAWS o VoiceOver? Me interesa saber si es un tema específico de NVDA+Firefox o si se replica en otras combinaciones.