Short answer: aria-describedby points an element to the id of another element whose text describes it. Two common uses are instructions for a field and a warning that a link opens a new tab. Screen readers announce the description after the name, sometimes only when the user asks for it.
What aria-describedby does
MDN describes aria-describedby as the attribute that identifies the element, or elements, that describe the one it is set on. Its value is an id, or several ids separated by spaces, of elements in the same page.
It isn’t limited to form fields. MDN lists widgets, groups, regions with a heading and definitions among its uses, on plain HTML elements or on elements with an ARIA role.
Name or description
| What you need | Attribute | Example |
|---|---|---|
| A name from text already on the page | aria-labelledby | A dialog named by its heading |
| A name with no visible text | aria-label | A close button that shows only an X |
| Extra information, as plain text | aria-describedby | A hint under a field, a new-tab warning |
| Longer content with structure | aria-details | A list or a table that explains a control |
Based on MDN and the W3C’s guide to ARIA authoring practices, read November 5, 2026.
MDN draws the line between the two: a label should be concise and say what the object is, while a description gives more information the user might need. Our aria-label guide covers the names.
In HTML, when nothing else gives a description, the W3C notes that the title attribute is used as one. It is better to write the description on purpose.
How screen readers announce it
The W3C explains that assistive technologies present names and descriptions differently. Descriptions are usually longer, so they come last, sometimes after a slight delay.
To keep things short, some screen readers don’t read descriptions by default. They tell users a description exists, and users press a key to hear it. So whatever people must know goes in the name or the visible text, as our screen reader guide shows.
Hidden descriptions and plain text
MDN says the elements linked by aria-describedby don’t need to be visible. A field can have a hint that sighted users open with a “more information” icon, while screen reader users hear it right away.
The W3C still recommends a visible description in general. And the description should be plain text: for content with structure, like a list, MDN points to aria-details.
A warning for links that open a new tab
The W3C’s technique G201 calls a warning good practice, though no success criterion requires it. Its examples put the warning in the link text, or show an icon and give assistive technology the same warning with aria-describedby.
The same idea serves form errors: a message under the field, linked with aria-describedby, which our form validation guide covers.
How to add a description
- Write the description as plain text in an element with an id.
- Put aria-describedby with that id on the element it describes.
- List several ids, separated by spaces, if two texts describe it.
- Keep the name short and leave the extra detail for the description.
- Hide the text only if sighted users get the same information another way.
- Use aria-details instead for content with structure, like a list or a table.
- Check in the accessibility tree or with a screen reader that the description is there.
What we found on our own pages
On November 5, 2026, we checked the links that open a new tab on our home page, a guide and the contact page, in both languages. On the home and contact pages every one of them already carried aria-describedby, pointing to a hidden text that says “Opens in a new tab”. Our website builder adds it.
The guide showed the gap: 8 of its 17 new-tab links had the description, and the 9 source links had none, because an SEO plugin opens them in a new tab without saying so. We added the missing description to those links, pointing to the hidden text that was already on the page.
Now all 17 carry it. On the guide, Chrome, Firefox and Safari’s engine all read “Opens in a new tab”, and nothing on the page moved by a single pixel.
Before you publish
- Every aria-describedby points to an id that exists on the page.
- Each description is short, plain text.
- Nothing people must know is only in a description.
- Hidden descriptions repeat something sighted users can see.
- Links that open a new tab say so, in the text or in a description.
- The name and the description don’t repeat each other.
RememberThe name says what something is, the description adds what else people need. Some screen readers only read it on request, so put what people must know in the name.
We look after names and descriptions on the sites we build in our web design service.
Quick answers about aria-describedby
What is aria-describedby?
An attribute that points an element to the id of another element whose text describes it. MDN describes it as a way to link a widget with the text that gives more information the user might need, such as a hint for a field.
What is the difference between aria-describedby and aria-labelledby?
aria-labelledby gives the name, aria-describedby the description. MDN puts it this way: a label should be concise and describe the essence of an object, while a description gives the extra information the user might need.
Can the description be hidden?
Yes. MDN and the W3C say an element can be referenced even if it is hidden, so a screen reader still announces its text. The W3C generally recommends a visible description, so hide it only when sighted users get the same information another way.
Do screen readers always read the description?
Not always. The W3C explains that descriptions come after the name, sometimes after a short delay, and that some screen readers only say a description exists and wait for a key press. Keep what people must know in the name or the visible text.
Should links that open a new tab say so?
The W3C calls it good practice, though no success criterion requires it. Its technique G201 shows two ways: put the warning in the link text, or show an icon and give the same warning to assistive technology with aria-describedby.
Sources
Read on November 5, 2026. MDN Web Docs: ARIA: aria-describedby attribute. W3C Web Accessibility Initiative: Providing Accessible Names and Descriptions, ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls and G201: Giving users advanced warning when opening a new window. Our case: our own pages, read in a browser on November 5, 2026.