`, announced as the page finishes loading"},{"id":"o2","label":"The \"Skip to content\" link — the first focusable element in the `<body>`"},{"id":"o3","label":"Banner landmark: the page `<header>`"},{"id":"o4","label":"Navigation landmark: the `<nav>` inside that header"},{"id":"o5","label":"Main landmark: the `<main>` element"},{"id":"o6","label":"Heading level 1: \"Tuesday night runs\""},{"id":"o7","label":"Article: \"Route of the week\", inside main"},{"id":"o8","label":"Complementary landmark: the weather `<aside>`"},{"id":"o9","label":"Contentinfo landmark: the page `<footer>`"}],"explain":"That sequence is just your document order read out loud, which is the point — the markup *is* the script. Notice how much of it is landmark names rather than content: `banner`, `navigation`, `main`, `complementary`, `contentinfo` are announced because you used those elements, and they're the stops the user can jump between instead of listening to all of it."},"hints":[{"text":"Start outside the body — something is announced before any content at all. Then follow the document from the top exactly as you wrote it in chapter 2."},{"text":"Title, skip link, header, the nav inside it, main, the h1 inside main, the article, the aside, the footer.","focus":{"kind":"items","ids":["o1","o2"]}}]},"codeHtml":"$undefined","index":21,"total":25,"authored":true}] b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 12:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 8:null d:[["$","title","0",{"children":"HTML That Holds — step 21 · Saasworld"}],["$","meta","1",{"name":"description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","2",{"name":"application-name","content":"Saasworld"}],["$","link","3",{"rel":"author","href":"https://saasworld.dev"}],["$","meta","4",{"name":"author","content":"Saasworld"}],["$","meta","5",{"name":"keywords","content":"learn to code,programming courses,SaaS,build a SaaS,AI-assisted coding,code review,web development course,JavaScript course,founders learning to code"}],["$","meta","6",{"name":"creator","content":"Saasworld"}],["$","meta","7",{"name":"publisher","content":"Saasworld"}],["$","meta","8",{"name":"robots","content":"noindex, follow"}],["$","meta","9",{"name":"category","content":"education"}],["$","link","10",{"rel":"canonical","href":"https://saasworld.dev/courses/html-that-holds/21"}],["$","meta","11",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","12",{"property":"og:title","content":"HTML That Holds — step 21 · Saasworld"}],["$","meta","13",{"property":"og:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","14",{"property":"og:url","content":"https://saasworld.dev/courses/html-that-holds/21"}],["$","meta","15",{"property":"og:site_name","content":"Saasworld"}],["$","meta","16",{"property":"og:locale","content":"en_US"}],["$","meta","17",{"property":"og:image","content":"https://saasworld.dev/opengraph-image"}],["$","meta","18",{"property":"og:image:width","content":"1200"}],["$","meta","19",{"property":"og:image:height","content":"630"}],["$","meta","20",{"property":"og:image:alt","content":"Saasworld — Learn to build and ship software"}],["$","meta","21",{"property":"og:type","content":"website"}],["$","meta","22",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","23",{"name":"twitter:title","content":"HTML That Holds — step 21 · Saasworld"}],["$","meta","24",{"name":"twitter:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","25",{"name":"twitter:image","content":"https://saasworld.dev/opengraph-image"}],["$","link","26",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L12","27",{}]] </article></body></html>

`. Without it, a keyboard user tabs through every navigation link on every page before reaching the content. It's usually hidden until focused — visible only when someone tabs to it.","Focus order follows DOM order too. `tabindex=\"0\"` puts a non-interactive element into the tab order; `tabindex=\"-1\"` takes an element out of it while leaving it focusable by script. Positive values (`tabindex=\"3\"`) jump the queue and are an anti-pattern: they reorder the whole page's tab sequence and are almost impossible to keep correct.","A test you can run right now, on any page, in thirty seconds: put the mouse down and press Tab from the top. Watch where focus goes and whether you can always see it. Anything you can click but can't reach is broken for a real group of users."],"gates":[{"id":"g1","prompt":"CSS moves a sidebar visually above the main content, but in the HTML the sidebar comes after it. Which order does a screen reader use?","options":[{"id":"a","label":"The visual order — assistive tech reads the rendered page","why":"It reads the DOM. The rendered position is a CSS decision that assistive technology doesn't follow, which is why visual and reading order can disagree."},{"id":"b","label":"The DOM order — the sidebar is announced after the main content, whatever the layout shows"},{"id":"c","label":"Whichever the browser considers more logical","why":"There's no such heuristic. The DOM is the document; CSS only paints it."}],"answer":"b","explain":"Source order is reading order and tab order. When a layout needs a different visual sequence, that's fine — just don't let the source order stop making sense.","unsure":"CSS can place boxes anywhere on screen, including in a different order from the markup. Screen readers and the Tab key both follow the markup, not the paint. So a page can read perfectly and tab nonsensically if the two have drifted apart.","after":1},{"id":"g2","prompt":"What problem does a \"Skip to content\" link solve?","options":[{"id":"a","label":"It lets people jump past the header image, which is slow to load","why":"Nothing to do with loading. It's about the number of Tab presses between the top of the page and the content."},{"id":"b","label":"A keyboard user otherwise has to tab through every navigation link, on every page, before reaching the content"},{"id":"c","label":"It replaces the need for landmark elements","why":"It complements them. Landmarks let a screen reader user jump; the skip link serves keyboard users who aren't running a screen reader at all."}],"answer":"b","explain":"First focusable element in the body, pointing at `#main`. Usually invisible until it receives focus, which is why you've probably never seen one.","unsure":"Someone navigating by keyboard reaches things in order by pressing Tab. On a site with twenty header links, that's twenty presses before the article starts — on every page. A skip link is a normal fragment link at the very top that jumps focus straight to `

`.","after":3}]},"task":{"kind":"order","instruction":"This is the running club page you rebuilt with landmarks in chapter 2. Put these in the order a screen reader user meets them when they start at the top of a freshly loaded page.","items":[{"id":"o1","label":"The document title from ``, announced as the page finishes loading"},{"id":"o2","label":"The \"Skip to content\" link — the first focusable element in the `<body>`"},{"id":"o3","label":"Banner landmark: the page `<header>`"},{"id":"o4","label":"Navigation landmark: the `<nav>` inside that header"},{"id":"o5","label":"Main landmark: the `<main>` element"},{"id":"o6","label":"Heading level 1: \"Tuesday night runs\""},{"id":"o7","label":"Article: \"Route of the week\", inside main"},{"id":"o8","label":"Complementary landmark: the weather `<aside>`"},{"id":"o9","label":"Contentinfo landmark: the page `<footer>`"}],"explain":"That sequence is just your document order read out loud, which is the point — the markup *is* the script. Notice how much of it is landmark names rather than content: `banner`, `navigation`, `main`, `complementary`, `contentinfo` are announced because you used those elements, and they're the stops the user can jump between instead of listening to all of it."},"hints":[{"text":"Start outside the body — something is announced before any content at all. Then follow the document from the top exactly as you wrote it in chapter 2."},{"text":"Title, skip link, header, the nav inside it, main, the h1 inside main, the article, the aside, the footer.","focus":{"kind":"items","ids":["o1","o2"]}}]},"codeHtml":"$undefined","index":21,"total":25,"authored":true}] b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 12:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 8:null d:[["$","title","0",{"children":"HTML That Holds — step 21 · Saasworld"}],["$","meta","1",{"name":"description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","2",{"name":"application-name","content":"Saasworld"}],["$","link","3",{"rel":"author","href":"https://saasworld.dev"}],["$","meta","4",{"name":"author","content":"Saasworld"}],["$","meta","5",{"name":"keywords","content":"learn to code,programming courses,SaaS,build a SaaS,AI-assisted coding,code review,web development course,JavaScript course,founders learning to code"}],["$","meta","6",{"name":"creator","content":"Saasworld"}],["$","meta","7",{"name":"publisher","content":"Saasworld"}],["$","meta","8",{"name":"robots","content":"noindex, follow"}],["$","meta","9",{"name":"category","content":"education"}],["$","link","10",{"rel":"canonical","href":"https://saasworld.dev/courses/html-that-holds/21"}],["$","meta","11",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","12",{"property":"og:title","content":"HTML That Holds — step 21 · Saasworld"}],["$","meta","13",{"property":"og:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","14",{"property":"og:url","content":"https://saasworld.dev/courses/html-that-holds/21"}],["$","meta","15",{"property":"og:site_name","content":"Saasworld"}],["$","meta","16",{"property":"og:locale","content":"en_US"}],["$","meta","17",{"property":"og:image","content":"https://saasworld.dev/opengraph-image"}],["$","meta","18",{"property":"og:image:width","content":"1200"}],["$","meta","19",{"property":"og:image:height","content":"630"}],["$","meta","20",{"property":"og:image:alt","content":"Saasworld — Learn to build and ship software"}],["$","meta","21",{"property":"og:type","content":"website"}],["$","meta","22",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","23",{"name":"twitter:title","content":"HTML That Holds — step 21 · Saasworld"}],["$","meta","24",{"name":"twitter:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","25",{"name":"twitter:image","content":"https://saasworld.dev/opengraph-image"}],["$","link","26",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L12","27",{}]] </article></body></html>

` naming the page; `

` for each section; `

` under an `

How a screen reader walks a page