Respuesta corta: aria-describedby conecta un elemento con el id de otro elemento cuyo texto lo describe. Sirve, por ejemplo, para las instrucciones de un campo o para avisar de que un enlace abre una pestaña nueva. El lector de pantalla anuncia la descripción después del nombre, a veces solo cuando el usuario la pide.
Qué hace aria-describedby
MDN describe aria-describedby como el atributo que identifica el elemento, o los elementos, que describen a aquel en el que se pone. Su valor es un id, o varios separados por espacios, de elementos de la misma página.
No se limita a los campos de formulario. MDN cita widgets, grupos, regiones con encabezado y definiciones entre sus usos, en elementos HTML normales o en elementos con un rol de ARIA.
Nombre o descripción
| Lo que necesitas | Atributo | Ejemplo |
|---|---|---|
| Un nombre con texto que ya está en la página | aria-labelledby | Un diálogo que toma el nombre de su título |
| Un nombre sin texto visible | aria-label | Un botón de cerrar que solo muestra una X |
| Información extra, en texto plano | aria-describedby | Una pista bajo un campo, un aviso de pestaña nueva |
| Contenido más largo con estructura | aria-details | Una lista o una tabla que explica un control |
Según MDN y la guía del W3C sobre prácticas de autoría con ARIA, en inglés, consultadas el 5 de noviembre de 2026.
MDN marca la diferencia entre los dos: la etiqueta debe ser concisa y decir qué es el objeto, mientras que la descripción da más información que el usuario puede necesitar. Nuestra guía de aria-label trata los nombres.
En HTML, cuando nada más da una descripción, el W3C señala que se usa el atributo title. Es mejor escribir la descripción a propósito.
Cómo la anuncia el lector de pantalla
El W3C explica que las tecnologías de apoyo presentan los nombres y las descripciones de forma distinta. Las descripciones suelen ser más largas, así que llegan al final, a veces tras una pausa breve.
Para no alargarse, algunos lectores de pantalla no leen las descripciones por defecto. Avisan de que hay una, y el usuario pulsa una tecla para oírla. Por eso lo que hay que saber va en el nombre o en el texto visible, como muestra nuestra guía del lector de pantalla.
Descripciones ocultas y texto plano
MDN dice que los elementos enlazados con aria-describedby no tienen que estar visibles. Un campo puede tener una pista que quien ve la página abre con un icono de «más información», mientras quien usa un lector de pantalla la oye enseguida.
Aun así, el W3C recomienda en general una descripción visible. Y la descripción debe ser texto plano: para contenido con estructura, como una lista, MDN remite a aria-details.
Un aviso para los enlaces que abren una pestaña nueva
La técnica G201 del W3C considera el aviso una buena práctica, aunque ningún criterio de éxito lo exige. Sus ejemplos ponen el aviso en el texto del enlace, o muestran un icono y dan el mismo aviso a las tecnologías de apoyo con aria-describedby.
La misma idea sirve para los errores de un formulario: un mensaje bajo el campo, enlazado con aria-describedby, que trata nuestra guía de validación de formularios.
Cómo añadir una descripción
- Escribe la descripción como texto plano en un elemento con un id.
- Pon aria-describedby con ese id en el elemento que describe.
- Pon varios ids, separados por espacios, si dos textos lo describen.
- Deja el nombre corto y lleva el detalle extra a la descripción.
- Oculta el texto solo si quien ve la página recibe lo mismo de otra forma.
- Usa aria-details para el contenido con estructura, como una lista o una tabla.
- Comprueba en el árbol de accesibilidad o con un lector de pantalla que la descripción está ahí.
Qué encontramos en nuestras páginas
El 5 de noviembre de 2026 revisamos los enlaces que abren una pestaña nueva en nuestra página de inicio, una guía y la de contacto, en los dos idiomas. En la de inicio y la de contacto todos llevaban ya aria-describedby, que apunta a un texto oculto que dice «Se abre en una pestaña nueva». Lo añade nuestro constructor de webs.
La guía mostró lo que faltaba: 8 de sus 17 enlaces a pestaña nueva tenían la descripción. Los 9 de las fuentes no la tenían, porque un plugin de SEO los abre en una pestaña nueva sin avisar. Añadimos la descripción que faltaba a esos enlaces, apuntando al texto oculto que ya estaba en la página.
Ahora la llevan los 17. En la guía, Chrome, Firefox y el motor de Safari leen «Se abre en una pestaña nueva», y nada en la página se movió ni un píxel.
Antes de publicar
- Cada aria-describedby apunta a un id que existe en la página.
- Cada descripción es corta y en texto plano.
- Nada de lo que hay que saber está solo en una descripción.
- Las descripciones ocultas repiten algo que se ve en la página.
- Los enlaces que abren una pestaña nueva lo avisan, en el texto o en una descripción.
- El nombre y la descripción no se repiten entre sí.
RecuerdaEl nombre dice qué es algo; la descripción añade lo demás que hace falta. Algunos lectores de pantalla solo la leen si se pide, así que lo que hay que saber va en el nombre.
En nuestro servicio de diseño web cuidamos los nombres y las descripciones de las webs que hacemos.
Respuestas rápidas sobre aria-describedby
¿Qué es aria-describedby?
Un atributo que conecta un elemento con el id de otro elemento cuyo texto lo describe. MDN lo describe como una forma de enlazar un widget con el texto que da más información que el usuario puede necesitar, como una pista para un campo.
¿Qué diferencia hay entre aria-describedby y aria-labelledby?
aria-labelledby da el nombre y aria-describedby la descripción. MDN lo explica así: la etiqueta debe ser concisa y decir qué es el objeto, mientras que la descripción da la información extra que el usuario puede necesitar.
¿La descripción puede estar oculta?
Sí. MDN y el W3C dicen que se puede hacer referencia a un elemento aunque esté oculto, y el lector de pantalla anuncia su texto igual. El W3C recomienda en general una descripción visible, así que ocúltala solo si quien ve la página recibe lo mismo de otra forma.
¿El lector de pantalla siempre lee la descripción?
No siempre. El W3C explica que la descripción llega después del nombre, a veces con una pausa corta. Algunos lectores de pantalla solo avisan de que existe y esperan a que pulses una tecla. Lo que hay que saber va en el nombre o en el texto visible.
¿Los enlaces que abren una pestaña nueva deben avisarlo?
El W3C lo considera una buena práctica, aunque ningún criterio de éxito lo exige. Su técnica G201 muestra dos formas: poner el aviso en el texto del enlace, o mostrar un icono y dar el mismo aviso a las tecnologías de apoyo con aria-describedby.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: MDN Web Docs, ARIA: aria-describedby attribute; Iniciativa de Accesibilidad Web del W3C, Providing Accessible Names and Descriptions, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls y G201: Giving users advanced warning when opening a new window. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.