principlejavascriptMajor
Semantic HTML over div soup — structure that screen readers can navigate
Viewed 0 times
HTML5, ARIA 1.2
semantic htmllandmarksdiv soupscreen reader navigationhtml5 sections
Problem
Pages built entirely from <div> and <span> elements have no navigable structure. Screen reader users cannot jump between sections, identify the main content area, or understand page hierarchy without semantic landmarks.
Solution
Use HTML5 landmark elements to create navigable regions. Screen readers expose these as shortcut jump points.
<header> — role=banner (one per page)
<nav> — role=navigation
<main> — role=main (one per page)
<aside> — role=complementary
<footer> — role=contentinfo
<section> — role=region (needs aria-label to be exposed)
<article> — role=article
<form> — role=form (needs aria-label)
// Minimal accessible page skeleton
<body>
<header><a href="#main">Skip to main content</a><nav>...</nav></header>
<main id="main">...</main>
<footer>...</footer>
</body>
<header> — role=banner (one per page)
<nav> — role=navigation
<main> — role=main (one per page)
<aside> — role=complementary
<footer> — role=contentinfo
<section> — role=region (needs aria-label to be exposed)
<article> — role=article
<form> — role=form (needs aria-label)
// Minimal accessible page skeleton
<body>
<header><a href="#main">Skip to main content</a><nav>...</nav></header>
<main id="main">...</main>
<footer>...</footer>
</body>
Why
NVDA, JAWS, and VoiceOver all provide landmark navigation shortcuts (e.g., pressing 'R' in NVDA to cycle regions). Without semantic structure, keyboard-only screen reader users must read every element from the top.
Gotchas
- <section> only becomes a landmark region if it has an accessible name via aria-label or aria-labelledby
- Multiple <nav> elements on a page should each have a unique aria-label to distinguish them
- <div> and <span> are intentionally role-neutral and should be used for styling/grouping only
- Nesting <main> inside <article> or <section> is invalid HTML and confuses parsers
Context
When building page layout and document structure
Revisions (0)
No revisions yet.