Accessibility in HTML

Accessible HTML ensures people using screen readers, keyboards, or other assistive technology can understand and use your page just as well as anyone else.

Accessibility Starts With Semantics

The single biggest accessibility win is simply using the right element for the job: a real <button> instead of a clickable <div>, a real <label> for every input, headings in logical order. Native elements come with keyboard support and screen reader announcements built in for free.

<!-- Poor: a div pretending to be a button -->
<div onclick="submitForm()">Submit</div>

<!-- Better: a real button, keyboard-accessible by default -->
<button type="submit">Submit</button>

ARIA — Use Sparingly

ARIA (Accessible Rich Internet Applications) attributes like aria-label and role can patch accessibility gaps for custom widgets, but they should be a last resort — the first rule of ARIA is not to use it if a native HTML element would already do the job.

Common Mistakes

• Making interactive elements out of <div> or <span> instead of using native <button> or <a> elements.
• Relying on colour alone to convey information (e.g. red text for errors) without an icon or text label as well.
• Adding ARIA roles to elements that already have the correct native semantics, which can create conflicting or redundant announcements.
• Building a page that cannot be fully navigated using only the Tab key on a keyboard.