# ARIA attributes

Category: [Agents & Protocols](https://seo-geo-glossary.com/en/glossary/category/agents-protocols/) › [Agent readiness & browser agents](https://seo-geo-glossary.com/en/glossary/category/agents-protocols/agent-readiness-browser-agents/) · Also known as: WAI-ARIA, aria-label

**ARIA** (Accessible Rich Internet Applications, specifically WAI-ARIA) is a W3C specification for giving HTML elements extra information for assistive technologies such as screen readers. It defines roles, states and properties. ARIA changes what is announced to assistive technology, but it does not add behavior. Keyboard handling and focus management remain the developer's job.

## What does ARIA include?

A **role** says what an element is, such as `role="progressbar"`. **States** describe a current condition, for example `aria-checked` or `aria-expanded`. **Properties** describe characteristics, such as `aria-label` or `aria-describedby`.

The WAI-ARIA specification says ARIA is a supplement to native semantics and not a replacement. When the host language provides a feature with equivalent accessibility, use that feature. ARIA is mainly useful for custom JavaScript widgets such as tabs, menus and dialogs.

## What is aria-label for?

`aria-label` supplies an accessible name for an element when no visible text exists or the existing name is inaccurate. A typical case is a button that shows only an icon. If visible label text exists, MDN recommends `aria-labelledby`, which takes precedence when both are present. The attribute overrides native names such as `alt` or a `<label>`. It is not supported on some roles, for example `generic`, `paragraph` and `presentation`. Because the text is hidden from sighted users, important information should also be visible.

## Example

```html
<button aria-label="Close">
  <svg aria-hidden="true" focusable="false" width="17" height="17">
    <path d="..." />
  </svg>
</button>
```

The icon is hidden from assistive technology. The button's accessible name is "Close".

## ARIA and AI agents

ARIA values feed into the browser's accessibility tree. That tree is also used outside screen readers: Playwright MCP from Microsoft reads pages through it instead of through screenshots, according to its project description. Labeled controls with correct roles are therefore easier for such tools to interpret (assessment).

## Common mistakes

- **Using ARIA instead of a native element.** The specification treats ARIA as a supplement to native semantics. When HTML provides an equivalent feature, use the HTML element.
- **`aria-hidden="true"` on focusable elements.** MDN warns against it, including on ancestors of focusable elements, because the attribute is inherited by children.
- **`aria-hidden` on top of `display: none` or `hidden`.** Such elements are already removed from the accessibility tree, so the attribute is redundant.
- **Hiding visible content with `aria-hidden`.** MDN advises it only when equivalent content stays available to assistive technology.

## FAQ

**What is the difference between a label and an aria-label?**
A `<label>` is visible text tied to a form field. `aria-label` gives a name that only assistive technology uses.

**Is aria-label the same as alt text?**
No. Alt text describes an image. `aria-label` names any supported element and overrides native names when both exist.

**When should you not use ARIA?**
When a native HTML element already provides the semantics and behavior.

## At a glance

- **Publisher:** W3C (Web Accessibility Initiative)
- **Connects:** HTML elements with assistive technologies through roles, states and properties
- **Version:** WAI-ARIA 1.2
- **Status:** W3C Recommendation of 2023-06-06
- **Specification:** [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/)

Last checked: October 8, 2026

## Related terms

- [Accessibility tree](https://seo-geo-glossary.com/en/glossary/accessibility-tree/index.md)
- [Web accessibility](https://seo-geo-glossary.com/en/glossary/web-accessibility/index.md)
- [Semantic HTML](https://seo-geo-glossary.com/en/glossary/semantic-html/index.md)
- [HTML](https://seo-geo-glossary.com/en/glossary/html/index.md)
- [Agentic browser](https://seo-geo-glossary.com/en/glossary/agentic-browser/index.md)

## Sources

- [aria-label – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label)
- [Accessible Rich Internet Applications (WAI-ARIA) 1.2 – W3C](https://www.w3.org/TR/wai-aria-1.2/)
- [ARIA6: Using aria-label to provide labels for objects – W3C WCAG 2.2 Techniques](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA6)
- [Playwright MCP – GitHub (Microsoft)](https://github.com/microsoft/playwright-mcp)
- [aria-hidden – MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden)

---

Last updated: October 8, 2026
URL: https://seo-geo-glossary.com/en/glossary/aria-attributes/