HTML Accessibility: ARIA Attributes and Best Practices

HTML Accessibility Attributes

Web accessibility ensures that websites are usable by everyone, including people who use screen readers, keyboard navigation, or other assistive technologies. HTML provides both native semantics and ARIA (Accessible Rich Internet Applications) attributes for this purpose.

The First Rule of ARIA

"No ARIA is better than bad ARIA." — Use native HTML semantics first. Only add ARIA when native elements cannot express the needed semantics.

ARIA Roles

<!-- Landmark roles (prefer native elements) -->
<div role="banner">...</div>     <!-- prefer <header> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="main">...</div>       <!-- prefer <main> -->

<!-- Widget roles -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel">Content</div>

<!-- Live region roles -->
<div role="alert">Error: invalid email</div>
<div role="status">Saved successfully</div>

Essential ARIA Properties

Attribute	Purpose
aria-label	Accessible name (when no visible text)
aria-labelledby	References element ID providing the label
aria-describedby	References element ID providing description
aria-hidden="true"	Hides element from accessibility tree
aria-expanded	Indicates expandable element state
aria-pressed	Indicates toggle button state
aria-live	Announces dynamic content changes
aria-required	Indicates required form field
aria-invalid	Indicates validation error

Keyboard Navigation

<!-- Make custom elements focusable -->
<div role="button" tabindex="0" onkeydown="handleKey(event)">
  Click me
</div>

<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>

Common Patterns

<!-- Accessible icon button -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Accessible form error -->
<input type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>

<!-- Accessible loading state -->
<div aria-busy="true" aria-live="polite">Loading results...</div>