HTML Accessibility

Understand the topic

Accessible HTML helps people use content with different devices, abilities, and interaction methods. Begin with native elements, logical headings, labelled controls, descriptive links, useful alternatives, and visible focus. Check keyboard navigation, text zoom, and contrast. Automated checks catch some issues but cannot determine whether every label or image description accurately communicates its purpose.

Worked example

<a href="#main">Skip to main content</a>
<nav aria-label="Main"><a href="#contact">Contact</a></nav>
<main id="main"><h1>Workshop registration</h1><section id="contact"><h2>Your details</h2><label for="access-email">Email</label><input id="access-email" name="email" type="email" autocomplete="email" aria-describedby="privacy"><p id="privacy">Used only for workshop messages.</p></section></main>

The skip link bypasses repeated navigation. The label names the field, and aria-describedby connects additional explanatory text without replacing the name.

Practice

Navigate your project using Tab, Shift+Tab, Enter, and Space. Check that every action is reachable and the focus is visible.

Use links for navigation, buttons for actions, labels for controls, and native disclosure elements where suitable. Fix unreachable actions and unclear names, then retest.

Common mistake

ARIA is not a substitute for correct HTML or keyboard behavior. Start with native semantics.

HTML documentation