01
Search the actual token
Queries accept a bare role, role=button or an aria-* name. The role and attribute filter narrows the curated index without a network request.
Developer reference
ARIA referencefor practical patterns
Search a curated set of roles and aria-* attributes. Open a result to inspect markup, interaction notes and the source specification.
ARIA reference
Matches
button
RoleA button triggers an action. Native button markup already supplies focus and keyboard activation.
Keyboard: Native HTML handles focus and basic keys; a custom role needs equivalent behavior.
Watch out: Do not add a redundant role when a native element already gives the same semantics and behavior.
Key requirements: None
HTML example
<button type="button">Save</button>Try a working control
Activated 0 times
Queries stay in this page; external sources open only when you choose a link.
Category
1 of 16 curated entries
WAI-ARIA 1.2 · 6 Jun 2023Entries checked 23 Sep 2026
When a component needs a name, state or role, an ARIA reference helps you separate the semantic token from the behavior that must still be coded. Search role=button or an aria-* attribute to begin.
This ARIA reference keeps a small set of common entries together with their examples and W3C links. It also points to the Authoring Practices Guide when a keyboard pattern is more involved than a code fragment.
Why use this ARIA reference
The definition, the behavior and the source appear together.
Prefer native behavior first
The button and checkbox entries show native HTML before custom roles. This ARIA reference makes it clear that role=button alone does not add focus or Enter and Space activation.
See state and interaction together
An aria-expanded example pairs the state with its controlled panel. This ARIA reference reminds you to update the value when visibility changes, rather than copying static markup.
From token to usable component
02
Read the behavior before copying
An ARIA reference example is a semantic starting point. For tabs, dialogs and comboboxes, follow the keyboard note and linked APG pattern before shipping.
03
Verify the version and test
Each entry links to the fixed WAI-ARIA 1.2 definition. Check focus, keyboard operation and speech in your real component; this ARIA reference cannot inspect your page.
Definitions connected to implementation
Two-way lookup
Search eight roles and eight aria-* states or properties in one index; the category control separates the two when a token is ambiguous.
Example and source per entry
Each entry has a copyable HTML fragment and a direct WAI-ARIA 1.2 definition link, with APG practice guidance for interactive patterns.
State is not behavior
Keyboard and caution notes explain why an attribute such as aria-expanded communicates state but does not open or close content.
What these examples cannot establish
- Curated scope
- This ARIA reference covers 16 selected entries. A missing token means it is outside this list, not that WAI-ARIA forbids it. Consult the full specification for other roles.
- Markup is only a starting point
- A copied tab, dialog or custom checkbox fragment does not implement focus management, arrow keys or state changes. Read the linked APG pattern and test the finished widget.
- No compliance verdict
- The page does not scan your DOM, run a screen reader or certify WCAG. Use the separate contrast checker for color ratios and human testing for real tasks.
ARIA reference questions
When should I use an ARIA role instead of native HTML?
Use semantic HTML when it already supplies the needed role and behavior, such as a button or checkbox. Add an ARIA role when the native element cannot express the intended widget, then implement its interaction.
Does role=button add keyboard support?
No. role=button changes what assistive technology is told; it does not make a div focusable or respond to Enter and Space. A native button usually gives those behaviors without extra code.
What is the difference between aria-label and aria-labelledby?
aria-label supplies a text name in the attribute. aria-labelledby points to one or more element IDs whose text provides the name. Prefer visible text and native labels where they fit.
Which ARIA attributes are required for a role?
Requirements depend on the role. The selected cards list the key relationships and states, with the fixed WAI-ARIA 1.2 definition linked for the complete normative requirements.
Can an ARIA reference prove WCAG compliance?
No. This ARIA reference is a lookup. WCAG conformance depends on the actual content and interactions, including keyboard and assistive technology testing; a token list cannot prove it.
Missing an entry or found an error?
Use the ARIA reference now
Choose a role or attribute, review its behavior, and open the W3C definition before adding it to your component.