Advanced Accessibility (ARIA)
aria-label, aria-labelledby, role, tabindex, skip links, and live regions — for when semantic HTML alone isn't enough.
The First Rule of ARIA
The official first rule of ARIA is: don't use ARIA if a native HTML element already does the job. A real <button> is automatically keyboard-accessible and announced correctly — a <div role="button"> requires you to manually replicate all of that behavior.
aria-label & aria-labelledby
aria-label provides an accessible name directly as a string — useful for icon-only buttons with no visible text. aria-labelledby instead points to the id of another element that already contains the label text.
<button aria-label="Close dialog">✕</button> <h2 id="billing-title">Billing Address</h2> <div aria-labelledby="billing-title">...</div>
role & tabindex
The role attribute tells assistive tech what a custom element behaves as, when you can't avoid a non-semantic element. tabindex="0" makes an otherwise unfocusable element reachable by keyboard Tab; tabindex="-1" removes it from the tab order while still allowing programmatic focus.
<div role="button" tabindex="0" onclick="submitForm()"> Submit </div> <!-- Better: just use <button>Submit</button> instead -->
Skip Links & Live Regions
A skip link is a hidden-until-focused link at the very top of the page that jumps keyboard users straight to main content, bypassing repetitive navigation. An ARIA live region announces dynamic content changes — like a form error appearing — without the user needing to move focus there.
<a href="#main" class="skip-link">Skip to main content</a> <div aria-live="polite" id="formStatus"></div> <!-- JS updates formStatus.textContent — screen readers announce it automatically -->
| Feature | Purpose |
|---|---|
| aria-label | Accessible name as a plain string |
| aria-labelledby | Accessible name from another element's id |
| role | Describes behavior of a non-semantic element |
| tabindex="0"/"-1" | Controls keyboard focus order |
| Skip link | Lets keyboard users bypass repeated navigation |
| aria-live | Announces dynamic content changes automatically |
Add a skip link at the top of a page pointing to "#main", and build a close icon button (✕) with aria-label="Close" instead of visible text.
💡 Show hints if you're stuck
- Skip link:
<a href="#main" class="skip-link">Skip to main content</a>