ARIA Complete Guide — Advanced Roles & Patterns

ARIA Deep Dive — Beyond the Basics of WAI-ARIA

This deep dive into WAI-ARIA explores advanced role relationships, accessibility tree manipulation, complex state management, and patterns for custom interactive widgets.

Landmark Roles — Banner, Navigation, Main, Complementary and Contentinfo

ARIA landmark roles identify major page sections like banner, navigation, main, complementary, and contentinfo, enabling screen reader users to navigate and jump between regions quickly.

Document Structure Roles — Article, Section, Heading and More

ARIA document structure roles like article, section, heading, list, and table describe content organization, helping screen readers convey document structure to users.

Widget Roles — Button, Link, Checkbox, Radio and Tab

ARIA widget roles like button, link, checkbox, radio, and tab identify interactive elements to assistive technologies, providing the semantics for user interaction patterns.

Composite Roles — Tablist, Menubar, Grid and Combobox

ARIA composite roles like tablist, menubar, grid, and combobox contain and manage multiple child widgets with roving tabindex or aria-activedescendant for focus management.

Live Region Roles — Alert, Log, Marquee, Status and Timer

ARIA live region roles like alert, log, marquee, status, and timer create regions where content changes are automatically announced by screen readers without requiring user focus.

aria-owns — Redefining Parent-Child Relationships in the Accessibility Tree

aria-owns establishes parent-child relationships between elements in the accessibility tree that differ from their DOM hierarchy, useful for tree views, menus, and composite widgets.

aria-flowto — Defining Custom Reading Order for Screen Readers

aria-flowto defines an alternative reading order through content, allowing screen reader users to navigate in a sequence that differs from the DOM order when needed for comprehension.

aria-controls — Indicating Which Element a Control Operates On

aria-controls identifies the element that is controlled or affected by the current interactive element, such as a button controlling a panel or a tab controlling a tabpanel.

aria-posinset and aria-setsize — Position and Size in a Set

aria-posinset and aria-setsize communicate an element's position within a set and the total set size to screen readers, essential when DOM order does not match logical set membership.

aria-setsize — Defining the Size of a Set

aria-setsize defines the total number of items in a set, used with aria-posinset when not all items are in the DOM, enabling screen readers to announce item N of M context.

aria-sort — Indicating Sorting State in Tables and Grids

aria-sort indicates the current sorting order of a table or grid column, with values ascending, descending, none, and other helping screen reader users understand sort state.

aria-grabbed — Indicating Drag and Drop State

aria-grabbed indicates whether a draggable element is currently being grabbed for drag and drop operations, helping screen reader users understand drag interaction state.

aria-dropeffect — Indicating Drop Target Behavior

aria-dropeffect indicates what happens when a dragged element is dropped on a target, with values like move, copy, execute, link, and none describing the operation result.

aria-haspopup — Indicating Popup Elements to Screen Readers

aria-haspopup indicates that an interactive element triggers a popup widget like a menu, dialog, listbox, tree, or grid, helping screen reader users understand what will appear.

aria-modal — Indicating Modal Dialogs to Screen Readers

aria-modal indicates that a dialog element is modal, meaning content outside the dialog is inert and cannot be interacted with until the dialog is dismissed.

aria-pressed — Indicating Toggle Button State

aria-pressed indicates whether a toggle button is currently pressed or unpressed, providing a three-state model for buttons that can be toggled between on and off.

aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext — Range Value Communication

Range ARIA attributes aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext communicate numeric and textual values for slider, progressbar, scrollbar, and spinbutton roles.

aria-keyshortcuts — Exposing Keyboard Shortcuts to Assistive Technology

aria-keyshortcuts exposes available keyboard shortcuts to screen readers, allowing users to discover and use keyboard commands without memorizing them beforehand.

ARIA Project — Build an Accessible Tab Panel

Apply all ARIA concepts to build a complete accessible tab panel with roles, states, keyboard navigation, roving tabindex, aria-controls, and aria-selected.