ARIA Language | Accessibility Exercises

1 / 5

The component uses role="dialog" and aria-modal="true".

What does the ARIA role attribute communicate?

ARIA role communicates element semantics to assistive technologies. role="dialog" signals a modal dialog to screen readers:

ARIA role type	Examples
Landmark roles	banner, navigation, main, complementary, contentinfo
Widget roles	dialog, button, tab, tabpanel, listbox, combobox
Document structure roles	article, list, heading, img, presentation

First rule of ARIA: don't use ARIA if native HTML provides the same semantics — use <button> not <div role="button">. Key vocabulary: "landmark role", "widget role", "aria-modal", "focus trapping in dialogs".

2 / 5

The loading spinner uses aria-live="polite".

What does an aria-live region do?

aria-live regions enable screen readers to announce dynamic content updates without requiring the user to navigate to the changed element:

Value	Behaviour	Use case
`polite`	Announce after current speech completes	Status messages, loading indicators
`assertive`	Interrupt current speech immediately	Critical errors, time-sensitive alerts
`off`	No announcement	Default; use when updates are not important

Key vocabulary: "live region", "dynamic content", "polite vs. assertive", "atomic update", "aria-relevant".

3 / 5

The design uses ARIA landmarks to structure the page.

What are ARIA landmark roles used for?

ARIA landmarks map HTML5 sectioning elements to navigable regions for screen reader users:

HTML element	Landmark role	Screen reader shortcut
`<header>`	banner	NVDA: D, JAWS: R
`<nav>`	navigation	NVDA: D, JAWS: R
`<main>`	main	NVDA: D, JAWS: R
`<aside>`	complementary	NVDA: D, JAWS: R
`<footer>`	contentinfo	NVDA: D, JAWS: R

Key vocabulary: "landmark navigation", "skip navigation", "document structure", "landmark bypass".

4 / 5

The button state is communicated via aria-expanded="false".

What type of ARIA attribute is aria-expanded and what does it communicate?

ARIA distinguishes between states (dynamic, change frequently) and properties (relatively static):

Type	Examples	Changes?
ARIA states	aria-expanded, aria-checked, aria-selected, aria-pressed	Yes — via JavaScript
ARIA properties	aria-label, aria-labelledby, aria-describedby, aria-controls	Rarely

aria-expanded="false" tells screen readers the controlled element (panel, menu) is collapsed. Update it to "true" when opened. Key vocabulary: "ARIA state", "controlled element", "aria-controls", "toggle state announcement".

5 / 5

The input has aria-describedby="hint-text error-text".

What does aria-describedby provide?

ARIA provides three distinct ways to supply names and descriptions to form fields:

Attribute	Purpose	Screen reader announcement
`aria-label`	Provides the accessible name directly as a string	As primary label
`aria-labelledby`	References element(s) that provide the accessible name	As primary label
`aria-describedby`	References element(s) with supplementary description	After label and role

Key vocabulary: "label vs. description", "error association", "form field description chain", "duplicate description prevention".