Respuesta corta: aria-label le da a un elemento un nombre para los lectores de pantalla cuando no hay texto visible que usar, como en un botón que solo tiene un icono. Si hay texto visible, deja que nombre al elemento, o apunta a él con aria-labelledby. Cuando un control muestra texto, su nombre tiene que contenerlo.
Qué hace aria-label
Todo elemento interactivo necesita un nombre accesible, el que anuncia un lector de pantalla. La mayoría ya tiene uno: el de un botón es el texto que lleva dentro, el de una imagen es su texto alternativo y el de un campo de formulario es su etiqueta. Nuestra guía del lector de pantalla explica cómo probar tu web con uno.
aria-label le da a un elemento un nombre escrito como texto. El ejemplo de MDN es un botón de cerrar que solo muestra una X. En la práctica, según MDN, solo funciona en elementos interactivos, widgets, puntos de referencia, imágenes e iframes. Si el icono de un botón con nombre es solo decoración, nuestra guía de aria-hidden explica cómo ocultarlo a los lectores de pantalla.
| Caso | Qué usar | Por qué |
|---|---|---|
| Botón con icono y sin texto | aria-label | No hay texto visible al que apuntar |
| Un texto visible etiqueta el elemento | El propio texto, o aria-labelledby | Los nombres visibles se mantienen y se traducen mejor |
| Campo de formulario | Un elemento label | Lo nativo de HTML va primero |
| Imagen | El atributo alt | El texto alternativo ya nombra la imagen |
| Instrucciones extra | Texto visible con aria-describedby | Las instrucciones deben llegar a todos |
A partir de MDN y del W3C, consultados el 4 de noviembre de 2026.
Cuándo es mejor aria-labelledby o un texto visible
Las reglas del W3C para nombrar prefieren el texto visible. Un nombre que sale del texto de la pantalla es más fácil de mantener, evita errores y exige menos trabajo de traducción. La siguiente regla es preferir lo nativo de HTML, como el elemento label en los campos de formulario.
aria-labelledby apunta a un texto que ya está en la página, así que MDN lo recomienda en vez de aria-label cuando hay una etiqueta visible. No uses los dos en un mismo elemento: aria-labelledby tiene prioridad. Un aria-label también pasa por encima del texto alternativo de una imagen o de la etiqueta de un campo.
Deja las instrucciones fuera de los nombres. MDN propone texto visible enlazado con aria-describedby, porque el contenido de aria-label no se muestra fuera de las tecnologías de asistencia. Nuestra guía de aria-describedby explica cómo enlazar ese texto.
El texto visible tiene que estar en el nombre
El criterio de éxito 2.5.3 de las WCAG, «Label in Name», de nivel A, pide que un control que muestra texto tenga un nombre que contenga ese texto. Quien usa control por voz dice las palabras que ve, así que si en la pantalla pone «Enviar», el nombre también tiene que decir «Enviar».
El W3C recomienda poner el texto visible al principio del nombre. Sus reglas para nombrar también piden nombres breves y útiles: los nombres largos o parecidos hacen difícil usar una página sin verla.
Nuestra guía de navegación con teclado explica cómo recorrer esos controles sin ratón, y nuestra guía del texto alternativo explica cómo nombrar las imágenes.
Cómo revisar los nombres de tu página
- Abre el panel de accesibilidad en las herramientas para desarrolladores del navegador.
- Recorre cada botón, enlace y campo de formulario y lee el nombre que muestra.
- Dale a cada botón que solo tiene un icono un aria-label que diga lo que hace.
- Donde haya texto visible, deja que nombre al control, o apunta a él con aria-labelledby.
- Comprueba que cada nombre contiene el texto visible de su control, mejor al principio.
- Deja los nombres cortos y distintos entre sí.
- Traduce las etiquetas junto con el resto de la página.
Nuestra guía del verificador de accesibilidad explica las pruebas automáticas que también detectan nombres que faltan.
Cómo nombramos nuestros propios controles
El 4 de noviembre de 2026 leímos en Chrome el árbol de accesibilidad de 10 de nuestras páginas, a un ancho de escritorio y a uno de teléfono. En las 20 vistas, los 2,096 enlaces, botones, interruptores y campos de formulario tenían nombre accesible.
198 lo recibían de aria-label, como el interruptor de modo oscuro, el botón de cerrar del chat o los días de nuestro calendario de reservas. Cuando un control también muestra texto, su nombre lo contiene, como pide el criterio 2.5.3 de las WCAG.
Nuestras páginas en español llevan sus propias etiquetas, como «Cambiar a modo oscuro» o «Cerrar», escritas junto con el resto de cada página.
Antes de publicar una página
- Cada botón, enlace y campo de formulario tiene nombre.
- Los botones que solo tienen un icono llevan aria-label.
- El texto visible nombra a su control cuando existe.
- Ningún elemento lleva aria-label y aria-labelledby a la vez.
- Cada nombre contiene el texto visible de su control.
- Las etiquetas están traducidas en cada versión de idioma.
RecuerdaUsa primero el texto visible y aria-label solo cuando no lo haya, y haz que cada nombre contenga las palabras que la gente ve.
Los controles accesibles y bien nombrados son parte de nuestro servicio de diseño web.
Respuestas rápidas sobre aria-label
¿Qué es aria-label?
Un atributo que le da a un elemento un nombre accesible, el que anuncian los lectores de pantalla. El ejemplo típico de MDN es un botón que solo tiene una X o un icono, como el de cerrar.
¿En qué se diferencian aria-label y aria-labelledby?
Los dos le dan un nombre accesible al elemento. aria-label lleva el texto dentro, mientras que aria-labelledby apunta a un texto visible de la página. Si hay texto visible que lo etiqueta, MDN pide usar aria-labelledby.
¿Puedo usar aria-label y aria-labelledby a la vez?
No conviene. Según MDN, aria-labelledby tiene prioridad cuando los dos están presentes, así que el texto de aria-label no se usa. Usa aria-labelledby cuando haya texto visible, y aria-label cuando no lo haya.
¿aria-label sustituye al texto alternativo o a la etiqueta de un campo?
No. Una imagen ya toma su nombre del texto alternativo, y un campo de formulario de su etiqueta label. Si añades aria-label de todos modos, MDN advierte que tiene prioridad sobre el texto alternativo o la etiqueta.
¿Qué es la etiqueta en el nombre?
El criterio de éxito 2.5.3 de las WCAG, de nivel A. Cuando un control muestra texto, su nombre accesible tiene que contenerlo, para que quien usa control por voz pueda decir lo que ve. El W3C recomienda poner ese texto al principio del nombre.
Fuentes
Consultadas el 4 de noviembre de 2026. MDN Web Docs: Utilizando el atributo aria-label. En inglés, MDN Web Docs: ARIA: aria-label attribute y ARIA: aria-labelledby attribute; Iniciativa de Accesibilidad Web del W3C: Providing Accessible Names and Descriptions y Understanding SC 2.5.3 Label in Name (Level A). Nuestro caso: 10 de nuestras páginas leídas en Chrome el 4 de noviembre de 2026.