Learning on Web Dev Open is free for all.

ArcadeLandmark
Arcade

Landmark

Phase 02 · Design CraftPlayable

Choose elements until the page announces the way a screen reader needs it to.

0 / 5 cleared
Level 1 · Landmarks

Four regions of a page. A screen reader should be able to jump between all four.

Your markup
  • the logo and the site title, across the top
  • the row of links to the main sections
  • the article everyone came for
  • copyright and the small print
What a screen reader says
  1. , nothing announced,
  2. , nothing announced,
  3. , nothing announced,
  4. , nothing announced,
Target
  1. banner
  2. navigation
  3. main
  4. contentinfo

Every announcement on the right follows from the element on the left by the rules browsers already apply, the same ones you can read for yourself in your browser’s accessibility inspector, which is worth opening on your own site straight after this.