TaskBuild the dashboard skeleton. Skip-link first. <header> with <h1>Dashboard</h1> + <nav aria-label='Primary'><ul><li>Home</li><li>Settings</li></ul></nav>. <main id='main' tabindex='-1'>: <h2>Stats</h2> + <p id='users' aria-live='polite'>0 users</p> + <p id='revenue' aria-live='polite'>$0</p>. <aside><h2>Recent</h2><ul><li>User signup</li></ul></aside>. <footer><nav aria-label='Footer'><ul><li>Help</li></ul></nav></footer>.
Capstone 3: a11y-perfect dashboard skeleton
250 XP16 min
Theory
What we're building
The skeleton of a user dashboard β the kind of layout every SaaS app ships. Must pass:
- Lighthouse a11y score 100.
- Five distinct ARIA landmarks (header, nav, main, aside, footer) β each labeled if duplicated.
- Skip-to-content link.
- Single h1, no heading skips.
- All interactive elements keyboard-accessible.
- Stats counters in aria-live regions for dynamic updates.
This skeleton is reused VERBATIM by the future Track C (JavaScript) capstones β meaning the JS lessons just need to wire up data fetching against this exact DOM.
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.