In JavaScript, the ariaDescription property of Element reflects the aria-description attribute — a string that describes or annotates the current element (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Syntax
Use el.ariaDescription. Start with this line.
JavaScript
el.ariaDescription
Call
What it does
el.ariaDescription
Primary signature.
Built into the browser. Read or assign el.ariaDescription — no import required.
Library declarations
JavaScript
el.ariaDescription
Parameters
Parameter
Description
Accessible name
Required. Label / aria-label / labelledby
ariaDescription
Optional. String annotation when no DOM description
Flat text
Required. No complex structure inside the string
Return Value
Return Value
Description
*
The current value of el.ariaDescription.
JavaScript Examples
Example 1 — Read ariaDescription
MDN-style close button: read the reflected annotation string.
JavaScript
const el = document.getElementById("close-button");
console.log(el.ariaDescription);
A longer description of the function of this element
How It Works
Select the element that has aria-description.
Read ariaDescription. Returns the string annotation.
Expect a longer phrase than the accessible name.
Remember: prefer aria-describedby when text is in the DOM.
Example 2 — Get and Set (MDN)
Update the annotation string from script.
JavaScript
const el = document.getElementById("close-button");
console.log(el.ariaDescription);
el.ariaDescription = "A different description";
console.log(el.ariaDescription); // "A different description"
A longer description of the function of this element
A different description
How It Works
Log the start value. Matches the HTML attribute.
Assign a new string. Keep it flat text.
Read again. Confirms property and attribute updated.
Leave the name alone.aria-label stays the short name.
Example 3 — Name vs Description
Pair a short label with a longer description string.
JavaScript
const el = document.getElementById("close-button");
el.ariaLabel = "Close";
el.ariaDescription = "Closes the dialog without saving changes";
console.log(el.ariaLabel); // short name
console.log(el.ariaDescription); // longer context
Set the description with ariaDescription — extra context.
Do not put the whole story in the label (MDN).
If help text is visible in the DOM, switch to aria-describedby.
Compatibility
Browser Support
Element.ariaDescription is Baseline Widely available (MDN: across browsers since March 2024). It is not Deprecated, Experimental, or Non-standard. The aria-description attribute remains in the ARIA 1.3 Editor’s Draft — prefer aria-describedby when help text is in the DOM.
✓ Baseline Widely available
Element.ariaDescription
Reflects aria-description as a string annotation. Prefer aria-describedby when descriptive text already exists in the DOM.
BaselineWidely available
Google ChromeSupported · Desktop & Mobile
Full support
Mozilla FirefoxSupported · Desktop & Mobile
Full support
Apple SafariSupported · macOS & iOS
Full support
Microsoft EdgeSupported · Chromium
Full support
Internet ExplorerNo native support · Use a polyfill
Polyfill
OperaSupported · Modern versions
Full support
Samsung InternetSupported · Android
Full support
Android WebViewSupported · Modern WebView
Full support
ariaDescriptionBaseline
Bottom line: Safe to read/write in modern browsers. Prefer aria-describedby for DOM help text; use ariaDescription when you need a string-only annotation.
Frequently Asked Questions
It reflects the aria-description attribute as a string that describes or annotates the current element — extra help beyond the short accessible name (MDN).
No. MDN marks Element.ariaDescription as Baseline Widely available (since March 2024). It is not Deprecated, Experimental, or Non-standard. The aria-description attribute itself is still in the ARIA 1.3 Editor's Draft — prefer aria-describedby when help text is in the DOM (MDN).
aria-label is a short accessible name. aria-description is a longer annotation that provides more context (MDN).
aria-description is a plain string on the element. aria-describedby / ariaDescribedByElements point to other elements whose text forms the description. Prefer describedby when the help text already exists in the DOM. If both are set, aria-describedby takes precedence (MDN).
A string. Reading and writing updates the reflected aria-description attribute.
When content is very long, has semantic structure, or needs navigation — use aria-details instead of a flat description string (MDN).
