ARIA Roles & Labels

Question 1

aria-label

Answer 1

aria-label

Defines a string label for an element, used by screen readers.

✅ Use when a visible label is not present but a name is needed for accessibility.

Question 2

aria-labelledby

Answer 2

aria-labelledby

Refers to the ID of another element that labels this element.

✅ Preferred over aria-label when there’s already visible text labelling the element.

Question 3

aria-describedby

Answer 3

aria-describedby

Refers to the ID of element(s) that provide descriptive information (e.g., instructions or hints).

✅ Use to provide extended help text or instructions beyond the label.

Question 4

aria-hidden

Answer 4

aria-hidden

Indicates whether the element is hidden from assistive technology.

✅ Use to hide decorative or redundant content.

Question 5

aria-live

Answer 5

aria-live

Tells screen readers that content updates dynamically and should be announced.

✅ Use in live regions (e.g., alerts, chat updates).

Question 6

aria-atomic

Answer 6

aria-atomic

Instructs screen readers whether to announce only changed content or entire region.

✅ Use with aria-live for clarity in updates.

Question 7

aria-relevant

Answer 7

aria-relevant

Specifies which types of changes should be announced in a live region (additions, removals, etc.).

✅ Combine with aria-live.

Question 8

aria-role

Answer 8

aria-role

Not an attribute itself. The correct term is just role.

✅ Assigns a role (e.g., button, dialog) to define purpose and behaviour.

Question 9

aria-checked

Answer 9

aria-checked

Indicates the checked state of checkboxes, switches, or menu items.

✅ Values: true, false, or mixed.

Question 10

aria-pressed

Answer 10

aria-pressed

Indicates the pressed state of toggle buttons.

✅ Values: true, false, or mixed.

Question 11

aria-expanded

Answer 11

aria-expanded

Indicates whether a collapsible region or widget is expanded or collapsed.

✅ Use on elements that control visibility of other regions (e.g., accordions, dropdowns).

Question 12

aria-controls

Answer 12

aria-controls

Points to the ID of elements being controlled by this element.

✅ Use with buttons or tabs that affect another region.

Question 13

aria-haspopup

Answer 13

aria-haspopup

Indicates that the element has a popup, like a menu, listbox, dialog, or tree.

✅ Helps screen readers expect a pop-up interaction.

Question 14

aria-current

Answer 14

aria-current

Indicates the currently active item within a set (e.g., pagination, tabs).

✅ Values: page, step, true, false.

Question 15

aria-disabled

Answer 15

aria-disabled

Indicates that the element is disabled, even if not visually disabled using HTML disabled.

✅ Allows styling and behaviour to reflect this state.

Question 16

aria-required

Answer 16

aria-required

Indicates that input is required in a form field.

✅ Use when HTML5 required is not sufficient or not applicable.

Question 17

aria-invalid

Answer 17

aria-invalid

Indicates the validation state of a form field.

✅ Values: false, true, grammar, spelling.

Question 18

aria-valuemax

Answer 18

aria-valuemax

Specifies the maximum allowed value for a widget like a slider or spinbutton.

✅ Use with aria-valuenow and aria-valuemin.

Question 19

aria-valuemin

Answer 19

aria-valuemin

Specifies the minimum allowed value.

✅ Always paired with aria-valuenow and aria-valuemax.

Question 20

aria-valuenow

Answer 20

aria-valuenow

Specifies the current value of a range widget.

✅ Required when the user can adjust values.

Question 21

aria-valuetext

Answer 21

aria-valuetext

Provides a human-readable representation of aria-valuenow.

✅ Useful when the numeric value needs clarification (e.g., volume levels).

Question 22

aria-busy

Answer 22

aria-busy

Indicates the element is being updated and screen readers should wait before reading it.

✅ Use on widgets that load new data dynamically.

Question 23

aria-modal

Answer 23

aria-modal

Indicates that an element is a modal dialog and the rest of the app is inaccessible.

✅ Use with role=”dialog” or role=”alertdialog”.

Question 24

aria-multiselectable

Answer 24

aria-multiselectable

Allows multiple items to be selected in widgets like listboxes.

✅ Used on parent container, not items themselves.

Question 25

aria-multiline

Answer 25

**aria-multiline** Indicates whether a **textbox** supports multiple lines. ✅ Used on elements with **role="textbox"**.

Question 26

aria-orientation

Answer 26

**aria-orientation** Indicates whether a **widget** is horizontal or vertical. ✅ Useful for sliders, tabs, toolbars.

Question 27

aria-readonly

Answer 27

**aria-readonly** Indicates that an **input** is read-only but not disabled. ✅ Used for fields that should not be changed by users.

Question 28

aria-roledescription

Answer 28

**aria-roledescription** Provides a **custom description** for the **role** of an element. ✅ Helps clarify purpose beyond the native role (use sparingly).

Question 29

aria-selected

Answer 29

**aria-selected** Indicates if an element is **selected in a group** (e.g., tabs or list items). ✅ Applies to options in listboxes, tabs, etc.

Question 30

aria-level

Answer 30

**aria-level** Indicates the **heading level** in a tree or document outline. ✅ Used when headings are not native

–

elements.