El cálculo del nombre accesible, explicado

El nombre accesible es la etiqueta breve que un lector de pantalla pronuncia para un elemento, como «Enviar» para un botón o «Buscar» para un campo.

Si un elemento no tiene nombre accesible, un lector de pantalla anuncia únicamente su rol, como «botón», y deja a los usuarios sin saber qué hace.

Rara vez se establece el nombre directamente. El navegador ejecuta un algoritmo de cálculo del nombre sobre el marcado para decidir cómo se llama cada elemento.

El algoritmo comprueba las fuentes en un orden de prioridad fijo y utiliza la primera que encuentra. Conocer ese orden permite predecir el resultado.

La máxima prioridad corresponde a aria-labelledby. Si está presente, sustituye a cualquier otra fuente y reúne el texto de los elementos a los que apunta.

Si no existe labelledby, el navegador utiliza aria-label, una cadena que se escribe directamente en el elemento como nombre que se pronunciará.

A continuación vienen las fuentes nativas, como un label asociado a un input o el texto alternativo de una imagen. Utilícelas siempre que sea posible.

En muchos elementos, el nombre se obtiene del contenido de texto. Un botón cuyo texto es Save se llama Save sin ningún atributo adicional.

La fuente con menor prioridad es el atributo title. Solo da nombre a un elemento cuando no existe una opción mejor, y es fácil pasarlo por alto.

El nombre calculado se aplana en una sola cadena y se comprimen los espacios adicionales, por lo que los saltos de línea y la sangría nunca llegan al usuario.

El nombre indica cómo se llama un elemento; una descripción aporta información adicional que se lee después. Hoy nos centramos en definir correctamente el nombre.

Ha aprendido el orden del cálculo del nombre: labelledby, después aria-label, luego las etiquetas y el contenido nativos, y title en último lugar. 🧩