HTML Accessibility
Build accessible HTML using semantic elements, labels, keyboard-friendly controls, and appropriate ARIA.
Accessibility Fundamentals
Accessible HTML allows people with different abilities and assistive technologies to understand and interact with web content. Native semantic HTML should be the first choice because browsers already expose meaningful accessibility information for standard elements.
Before adding ARIA, ask whether a native HTML element already provides the required semantics and behavior.
- Semantic HTML is a major accessibility foundation.
- Native controls generally provide built-in keyboard and accessibility behavior.
What should generally be preferred before adding custom ARIA semantics?
Keyboard Accessibility
Interactive functionality must be usable without a mouse. Native buttons, links, inputs, and form controls already provide keyboard interaction. Avoid replacing these controls with clickable generic elements unless there is a strong reason and all required behavior is implemented.
<button type="button" id="saveButton">Save</button>- Native interactive elements are keyboard accessible by default.
- Do not use a div as a button merely because it is easy to style.
Which is the best native element for triggering an action?
ARIA Basics
ARIA (Accessible Rich Internet Applications) provides additional semantics when native HTML cannot adequately represent a custom interface. Common attributes include aria-label, aria-labelledby, aria-describedby, aria-expanded, and aria-hidden.
ARIA communicates semantics and state. JavaScript must still implement the actual interaction behavior.
<button aria-expanded="false" aria-controls="menu">Menu</button>\n<nav id="menu" hidden>\n <a href="/docs">Docs</a>\n</nav>- ARIA supplements HTML semantics rather than replacing them.
- ARIA attributes do not automatically implement functionality.
Does aria-expanded automatically open and close a menu?