Accessibility: Building Sites Everyone Can Use Semantic HTML Does Most of the Work
1 / 5
Next
Semantic HTML Does Most of the Work ~14min

The first rule

The right element gives you accessibility free. A <button> is focusable, activates on Enter and Space, and announces itself as a button. A <div onclick> does none of that, and recreating it takes four extra attributes people rarely add.

Landmarks

header, nav, main, aside, footer. Screen reader users jump between these the way sighted users skim. A page built entirely from divs has no landmarks to jump to, so it must be read from the top, every single time.

Headings are an outline, not a font size

One h1 per page, then h2, then h3, never skipping a level because the size looked better. Size belongs in CSS. Screen readers offer a heading list as the main way to navigate a long page; a broken outline breaks that.

Real gains

Semantic markup also gives search engines structure, makes your CSS selectors saner, and gives you free keyboard behaviour. Doing it properly is less work, not more.

Tasks
Preview