HTML Accessibility
ARIA attributes, roles, states, keyboard navigation, and screen readers.
Overview
Accessible HTML ensures everyone can use your website.
Key Concepts
- ARIA Roles â Define element purpose
- ARIA States â Current element state
- Keyboard Navigation â Tab order and focus management
- Screen Readers â Assistive technology support
- Color Contrast â Readable text for all users
Code Examples
<button
aria-label="Close dialog"
aria-pressed="false"
onclick="toggleDialog()"
>
Ã
</button>
<nav aria-label="Main navigation">
<ul role="menubar">
<li role="none">
<a role="menuitem" href="/">Home</a>
</li>
<li role="none">
<a role="menuitem" href="/about">About</a>
</li>
</ul>
</nav>
<div aria-live="polite" aria-atomic="true" id="status">
</div>
<form>
<div>
<label for="search">Search</label>
<input
type="search"
id="search"
aria-describedby="searchHelp"
aria-required="true"
>
<span id="searchHelp">Enter a search term</span>
</div>
<div role="alert" aria-live="assertive" id="errors">
</div>
</form>
<a href="#main-content" class="skip-link">Skip to main content</a>
<main id="main-content">
</main>
Practice
Make a complex form fully accessible with ARIA and keyboard navigation.