JavaScript Element ariaLabel Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIALABEL

Definition

Element.ariaLabel reflects the aria-label attribute: a string that labels the current element for assistive technologies (MDN).

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaLabel. Start with this line.

JavaScript
el.ariaLabel;
CallWhat it does
el.ariaLabel;Primary signature.

Built into the browser. Read or assign el.ariaLabel — no import required.

Library declarations
JavaScript
el.ariaLabel;

Parameters

ParameterDescription
PropertyRequired. el.ariaLabel
ValueRequired. String (or null when unset)

Return Value

Return ValueDescription
*The current value of el.ariaLabel.

JavaScript Examples

Example 1 — Get and Set ariaLabel (MDN)

Read the accessible name, then make it more specific.

JavaScript
const el = document.getElementById("close-button");
console.log(el.ariaLabel); // "Close"
el.ariaLabel = "Close dialog";
console.log(el.ariaLabel); // "Close dialog"
Try It Yourself

How It Works

  1. Select the control that needs a clear accessible name.
  2. Read ariaLabel. Starts as "Close" (MDN).
  3. Assign a clearer string. Reflects to aria-label.
  4. Keep it short — name the action, do not write a sentence.

Example 2 — Label an Icon Menu Button

Give an icon-only control a name screen readers can announce.

JavaScript
const btn = document.getElementById("menu");
btn.ariaLabel = "Open menu";
console.log(btn.ariaLabel); // "Open menu"
console.log(btn.getAttribute("aria-label")); // "Open menu"
Try It Yourself

How It Works

  1. Pick an icon-only control with no readable text.
  2. Set a verb + object name like "Open menu".
  3. Confirm reflection with getAttribute("aria-label").
  4. Update the string if the action changes (Open → Close).

Example 3 — Clear aria-label

Remove the attribute when you switch to a visible name instead.

JavaScript
const el = document.getElementById("close-button");
el.removeAttribute("aria-label");
console.log(el.ariaLabel); // null
console.log(el.getAttribute("aria-label")); // null
Try It Yourself

How It Works

  1. Remove the attribute when you no longer need an override name.
  2. Expect null from the property when the attribute is gone.
  3. Provide another name (visible text or aria-labelledby) so the control is not unlabeled.
  4. Do not leave icon-only buttons without any accessible name.
Compatibility

Browser Support

Element.ariaLabel is Baseline Widely available (MDN: since October 2023). Safe for modern evergreen browsers.

✓ Baseline · Widely available

ariaLabel

Reflects aria-label as a string accessible name for the element.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaLabel Excellent

Bottom line: Use for icon-only or unclear controls. Prefer visible labels when possible. Keep the string short and accurate.

Frequently Asked Questions

It reflects the aria-label attribute as a string (or null), which defines a string value that labels the current element for assistive technologies (MDN).
No. MDN marks Element.ariaLabel as Baseline Widely available (since October 2023). It is not Deprecated, Experimental, or Non-standard.
A string or null. When the attribute is missing, many browsers return null.
Use it when a control has no clear visible text name—for example an icon-only button. Prefer a visible label or aria-labelledby when a visible name already exists.
For many elements, aria-label becomes the accessible name and can override text content for assistive technologies. Keep the label accurate and concise.
Yes. Custom elements can use ElementInternals.ariaLabel for the same reflected value from inside a component (MDN).

Next: ariaLabelledByElements

Learn the element-reference property for accessible names from other nodes.

ariaLabelledByElements tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaKeyShortcuts Property JavaScript Element ariaLabelledByElements Property