Structure: The Invisible Accessibility Skeleton
Can you see your page's structure when you browse it? No. And that's the point -- you're sighted. But for screen reader users, HTML structure is everything. It's the difference between a well-organized library and a pile of random books. Good structure enables efficient navigation, clear content organization, and quick access to relevant sections.
Heading Hierarchy (h1-h6)
Headings are your page's table of contents. Screen reader users press "H" to jump between headings -- if your hierarchy is broken, they're lost. One h1 per page (the main topic), logical hierarchy without skipping levels (h1 to h3 is like a book skipping from chapter 1 to chapter 3), headings for structure not styling. Install the HeadingsMap extension -- you'll probably discover broken hierarchies everywhere on your site.
HTML5 Landmarks
Landmarks are like signposts for your page. They let screen reader users jump directly to major sections -- think of them as GPS for your site. Use header (banner), nav (navigation), main (one per page), footer (contentinfo), aside (complementary). Label multiple navs with aria-label to distinguish them. And remember: a section only becomes a landmark if it has an aria-label or aria-labelledby.
Skip Link
The skip link is the shortcut nobody sees but keyboard users love. It's the very first focusable element on the page, letting users jump straight to main content. Visually hidden by default, visible on keyboard focus (RGAA 12.7). Try it on any government website -- you'll see it appear when you press Tab.
Reading Order
DOM order must match visual order. Sounds obvious, but modern CSS makes this tricky. Avoid positive tabindex (never use tabindex > 0), CSS reordering (flexbox order, grid) that creates visual/DOM mismatch, and absolutely positioned content that appears before its DOM location.
Good HTML structure is the foundation of everything. Without it, even the most sophisticated ARIA attributes can't save you. Always start here.