Structure & semantics
Sighted users take the shape of a page in at a glance: the banner at the
top, the headline, the columns, the menu, the footer. A screen reader user can’t see
that shape — they build their mental model entirely from the markup. Semantic HTML is
what hands them that map. Headings let them skim and jump; landmarks let them leap to the
main content or the navigation; lists tell them how many items there are before they
commit to reading; and the source order decides the order everything is announced in.
Use the right element and the page is navigable. Reach for a <div> for
everything and you hand them a flat, mapless wall of text.
Who this affects
- Screen reader users navigating by heading or landmark pull up a list
of every heading or every region to move around a page, the way a sighted user scans
for a section. Fake headings never appear in that list, and a page built from
<div>s has no regions to jump to, so the fastest way to navigate is simply gone. - Keyboard users rely on landmarks and a skip link to bypass the
repeated header and go straight to
<main>. Without real landmarks they must tab through every menu item on every page before reaching the content. - Reading-order-dependent users — screen reader, braille display, and switch users — receive content in DOM order, not visual order. When CSS reorders the page, what they hear no longer matches what others see, and instructions can arrive after the control they apply to.
- Cognitive and low-vision users depend on a clear, consistent heading outline and genuine lists to chunk information and keep their place.
Standards covered
The lessons in this category map page structure to the success criteria and laws that require it. The same semantic markup satisfies all of them at once.
Lessons
-
Headings, landmarks & semantic structure
Real headings in order, landmark regions instead of div soup, lists marked up as lists, and a DOM order that matches the visual order — the structural fixes that make a page navigable.
1.3.1 1.3.2 2.4.1 2.4.6 Landmarks & page regions
Use header, nav, main, aside and footer — and label repeated landmarks.
Reading order & meaningful sequence
Keep DOM order matching the visual reading order; avoid positive tabindex.
More structure lessons are coming
We’re adding focused lessons on accessible tables, descriptive page titles and link text, skip links, and the document language. Start with Headings, landmarks & semantic structure — it covers the defects you’ll meet most often.