Roadmap › HTML5 & CSS3 — Semantic Markup to Responsive Layouts › Module: HTML Foundations
Lessons in this course (11)
3. Accessibility essentials
Basic★ Must knowLesson 3 of 11
- Meaningful
alttext on images (alt=""for decorative ones). - Use real
<button>for actions and<a href>for navigation — they work with the keyboard for free. - Visible focus styles; logical tab order; never
outline: nonewithout a replacement. - Colour contrast at least 4.5:1 for normal text (WCAG AA).
- Headings in order;
langon<html>; labels on all form fields. - ARIA only when native HTML can't express it:
aria-label,aria-expanded,aria-live="polite"for status messages,role="dialog". "No ARIA is better than bad ARIA."
html
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>…</ul>
<div aria-live="polite" id="status"></div> <!-- screen readers announce updates -->