ARIA Roles & Attributes

aria-hidden="true" removes an element and its descendants from the accessibility tree. It does not visually hide the element.

<span aria-hidden="true">★</span>
<span>5 out of 5 stars</span>

Do not apply aria-hidden="true" to focusable elements or their ancestors while they remain keyboard-accessible. Use the HTML hidden attribute when content should be hidden visually and from assistive technology.

8. aria-live

aria-live can announce dynamic updates to assistive technology. It is useful for messages such as form submission results.

<p id="status" role="status" aria-live="polite"></p>

When JavaScript updates the text, assistive technology may announce the change. Use live regions thoughtfully; frequent or unnecessary announcements can be disruptive.

9. Accessible Error Messages

<label for="user-email">Email</label>
<input id="user-email" name="email" type="email"
  aria-describedby="email-error" aria-invalid="true">
<p id="email-error">Enter a valid email address.</p>

In this example, the field is already in an invalid state. A real application should set aria-invalid and update the error text according to actual validation results. Do not mark a field invalid before it has actually failed validation unless that is appropriate for the interface.

Common Mistakes

• Using ARIA when a native semantic element already works.
• Adding roles without implementing the expected keyboard interaction.
• Leaving aria-expanded unchanged when a panel opens or closes.
• Using aria-hidden to hide content visually.
• Adding aria-live regions that announce too many changes.

Practice Exercises

1. Add an accessible name to an icon-only close button.
2. Associate a password field with help text using aria-describedby.
3. Build a static expandable-menu example using aria-controls and aria-expanded.
4. Explain why a native button is usually better than a clickable div.

Revision Quiz

1. What does ARIA stand for?
2. What does aria-label provide?
3. Which attribute associates a control with descriptive help text?
4. What does aria-expanded communicate?
5. Does aria-hidden visually hide an element?
6. Does ARIA automatically implement keyboard behavior?

Answer Key and Explanations

1. Accessible Rich Internet Applications — ARIA adds accessibility semantics to interfaces.
2. An accessible name — It can name a control when visible text is not sufficient.
3. aria-describedby — It points to text that describes the control.
4. Whether associated content is expanded — Its value should match the interface state.
5. No. It hides content from the accessibility tree, not from visual display.
6. No. Keyboard behavior must be implemented or provided by native HTML.