Aplicar los atributos aria-label o aria-labelledby a elementos HTML de texto estático como
, o es un error frecuente de accesibilidad. Estos atributos están pensados para elementos interactivos (botones, enlaces, controles de formulario) y para regiones landmark, no para texto no interactivo.
Según la especificación ARIA 1.2, aria-label y aria-labelledby no están permitidos en roles como caption, code, deletion, emphasis, generic, insertion, paragraph, presentation, strong, subscript ni superscript. El borrador de ARIA 1.3 amplía la lista de exclusiones a definition, mark, none, suggestion, term y time. Como los navegadores construyen los árboles de accesibilidad respetando estas normas, los lectores de pantalla normalmente ignorarán los aria-label aplicados de forma inválida, y los supuestos "arreglos" de accesibilidad dejarán de funcionar.
Un caso típico de confusión es VoiceOver en macOS: sí anuncia el contenido del aria-label en elementos genéricos, lo que puede dar la falsa impresión de que la técnica es correcta. En realidad, VoiceOver está compensando código no conforme como hacen otros agentes de usuario. Además, según las encuestas de WebAIM, VoiceOver está sobrerrepresentado entre desarrolladores y testers, no entre usuarios reales con discapacidad.
Antes de añadir un aria-label, conviene preguntarse si resuelve un problema real: a veces basta con eliminarlo, usar texto visible, recurrir a texto visualmente oculto con CSS, o elegir un elemento HTML con la semántica adecuada, como
con su encabezado asociado, en lugar de un