HTML Accessibility
Accessible markup makes the same content and actions usable through different devices and interaction methods. Start with native elements and clear relationships before adding custom behaviour.
How it works
- Give the page a meaningful title, a logical heading hierarchy, and landmarks. Offer a skip link when repeated navigation precedes the main content.
- Associate labels with controls, provide appropriate image alternatives, and use descriptive link and button names. Keep keyboard focus visible.
- Test keyboard use, zoom, narrow layouts, and understandable error messages. Automated checks help, but do not replace a manual review of the experience.
A practical example
<a href="#content">Skip to main content</a>
<nav aria-label="Main"><a href="index.html">Home</a></nav>
<main id="content" tabindex="-1">
<h1>Book a workshop</h1>
<label for="guest-name">Your name</label>
<input id="guest-name" name="name" autocomplete="name">
</main>
The skip link lets a keyboard user move past repeated navigation. The native label supplies a name for the input without depending on placeholder text.