Master Accessibility - From Theory to Practice

Common ARIA Attributes

aria-label

Provides an accessible label for elements with no visible text (e.g., icon buttons).

aria-labelledby

References another element by ID to use its text as the label.

aria-describedby

Associates additional descriptive text with an element (e.g., error messages, help text).

aria-controls

Identifies the element(s) whose contents or presence are controlled by the current element (e.g., button that controls a panel).

aria-hidden

Hides content from assistive technology while keeping it visible visually.

aria-expanded

Indicates the state of collapsible elements (true/false) for accordions, menus, tree views.

aria-current

Indicates the current item within a set (e.g., current page, current step).

aria-live

Indicates that an element will be updated, and describes the types of updates (polite, assertive, off). Used for live regions like status messages.

aria-atomic

Indicates whether assistive technologies should present the entire region as a whole when updated (true/false).

aria-haspopup

Indicates the availability of a popup menu, dialog, or submenu (true/false, or menu/listbox/tree/grid).

aria-orientation

Indicates whether an element's orientation is horizontal, vertical, or undefined (for separators, toolbars, lists).

aria-selected

Indicates the current "selected" state of widgets like tabs, listbox options, or tree items (true/false).

aria-checked

Indicates the current "checked" state of checkboxes, radio buttons, and menu items (true/false/mixed).

aria-pressed

Indicates the current "pressed" state of toggle buttons (true/false/mixed).

aria-disabled

Indicates that an element is perceivable but disabled, preventing user interaction (true/false). Note: Use HTML 'disabled' attribute instead when possible.

aria-readonly

Indicates that the element is not editable, but is otherwise operable (true/false). Differs from disabled.

aria-required

Indicates that user input is required before form submission (true/false).

aria-invalid

Indicates that the entered value does not conform to the format expected by the application (true/false, with grammar/spelling values).

aria-modal

Indicates that an element is a modal dialog, blocking interaction with the rest of the application (true/false).

aria-owns

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship when DOM hierarchy cannot be used.

aria-sort

Indicates if items in a table or grid are sorted in ascending or descending order (ascending/descending/none/other).

aria-valuemin

Defines the minimum allowed value for a range widget (e.g., slider, progressbar).

aria-valuemax

Defines the maximum allowed value for a range widget (e.g., slider, progressbar).

aria-valuenow

Defines the current value for a range widget (e.g., slider, progressbar, spinbutton).

aria-valuetext

Defines the human-readable text alternative of aria-valuenow (for range values like "1/3" or "Page 1").

Accessibility Terminology

Assistive Technology (AT)

Hardware/software that helps people with disabilities (e.g., screen readers, magnifiers, switches).

Focus Ring

Visual indicator showing which element currently has keyboard focus.

Landmark

ARIA or HTML5 regions that define page structure (banner, navigation, main, etc.).

Screen Reader

Software that reads screen content aloud for blind users (NVDA, JAWS, VoiceOver).

Semantic HTML

Using HTML elements for their intended purpose (button, nav, article) rather than generic divs.

WCAG

Web Content Accessibility Guidelines - W3C accessibility standards.

Screen Reader Keyboard Shortcuts