The 'First Rule of ARIA' Applied to a Custom Button
A developer builds a clickable element as a styled <div> with a
click handler, then adds role="button" and aria-label to try to
make it accessible.
Per the "first rule of ARIA" this subject describes, what's the better approach?
The correct answer is "Use a native <button> element, which gets
this behavior for free."
This subject names the first rule of ARIA directly: if a native HTML
element or attribute already has the behavior or semantics you need,
use it rather than reaching for ARIA on a generic element. A native
<button> is automatically in the tab order, automatically has
role="button" in the accessibility tree, automatically responds to
Enter/Space, and automatically gets a default focus indicator — ARIA
can describe a custom widget, but it never grants the built-in
keyboard behavior a native element gets for free; that still has to
be wired up by hand on the div.
The distractors overstate or misapply ARIA: "ARIA roles alone are
sufficient, no native element ever needed" is exactly the
misconception the first rule corrects; adding a title attribute
instead of aria-label doesn't fix the underlying issue — the div
still lacks the native keyboard and focus behavior a button provides
automatically; and the original div-plus-ARIA approach is not
already correct — it's the described starting point precisely
because it's missing the behaviors a native element grants for free.
Share this question