Harbour Lights 2026
\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nLine-up
\n- \n
- Nour Quartet \n
- The Saltmarsh Band \n
Tickets
\nFriday pass
\nSAR 180, standing.
\nWeekend pass
\nSAR 320, both nights.
\nSamir once described a badly built page to me as “a phone book with the names torn off”. Everything is there, but nothing tells him where one part ends and the next begins. Ticketly’s home page is exactly that: every block is a div, and the biggest text is a div with a large font. A sighted user sees a header, a menu, a festival title, a line-up and a footer. A screen reader sees one long stream of text.
HTML has elements that describe the role of a whole region. The browser maps each to an ARIA landmark, and screen readers let users list landmarks or jump between them (the D key in NVDA, the rotor in VoiceOver).
\n| Element | \nLandmark role | \nNotes | \n
|---|---|---|
<header> | \nbanner | \nOnly when it is a direct part of the page, not inside article, aside, main, nav or section | \n
<nav> | \nnavigation | \nName it when there are several | \n
<main> | \nmain | \nExactly one visible per page | \n
<aside> | \ncomplementary | \nRelated content such as a sidebar | \n
<footer> | \ncontentinfo | \nSame scoping rule as header | \n
<form>, <section> | \nform, region | \nOnly when they have an accessible name | \n
<search> | \nsearch | \nWraps a site search form | \n
Here is Ticketly’s skeleton before and after:
\n<div class=\"top\">\n <div class=\"logo\">Ticketly</div>\n <div class=\"links\"><a href=\"/events\">Events</a> <a href=\"/faq\">FAQ</a></div>\n</div>\n<div class=\"content\">\n <div class=\"title\">Harbour Lights 2026</div>\n …\n</div>\n<div class=\"bottom\">© 2026 Ticketly · <a href=\"/terms\">Terms</a></div><header>\n <a href=\"/\" class=\"logo\">Ticketly</a>\n <nav aria-label=\"Site\">\n <a href=\"/events\">Events</a> <a href=\"/faq\">FAQ</a>\n </nav>\n</header>\n<main>\n <h1>Harbour Lights 2026</h1>\n …\n</main>\n<footer>© 2026 Ticketly · <a href=\"/terms\">Terms</a></footer>The visual design doesn’t change at all; these elements have no special styling beyond display: block. What changes is the accessibility tree: Samir can now press D to land on “main landmark” and start reading the festival content, skipping the header entirely.
A <section> on its own is just a generic container. Give it a name and it becomes a region landmark that appears in the landmarks list. The neatest way is to point at its own heading, so the name and the visible text can never drift apart:
<section aria-labelledby=\"tickets-heading\">\n <h2 id=\"tickets-heading\">Tickets</h2>\n …\n</section>Don’t turn every section into a region, though. Landmarks work like the chapter list of a book: five to eight entries are useful, thirty are not. The rule of thumb is that every piece of content lives inside some landmark (automated checkers flag text that doesn’t), and that only the big, distinct areas a user might want to jump to get one of their own.
\nLandmarks are the rooms of the page; headings are the signs on the doors. Most screen reader users find content by jumping from heading to heading (H in NVDA and JAWS, or 1 to 6 for a specific level), or by opening a list of all headings and typing to filter it. That list is only useful if the headings form a real outline.
\nThree rules cover almost every case:
\nh1 that says what the page is. On Ticketly, “Harbour Lights 2026”, not the logo.Ticketly’s tickets area uses h4 and h5 because a designer wanted smaller text. Fix the structure first, then style:
<h2>Tickets</h2>\n<h3 class=\"pass-title\">Friday pass</h3>\n<h3 class=\"pass-title\">Weekend pass</h3>.pass-title {\n font-size: 1rem;\n font-weight: 600;\n}Don’t forget the page’s <title> either. It is the first thing a screen reader announces when the page loads and what appears in tabs and history (2.4.2 Page Titled). Put the specific part first: <title>Harbour Lights 2026 tickets · Ticketly</title>.
With the skeleton in place, the next lesson tackles the parts users actually click: buttons, links, and the clickable divs pretending to be both.
\n","toc":[{"id":"sec-1","text":"Landmarks: the regions of a page","level":2},{"id":"sec-2","text":"Naming regions, and how many to use","level":2},{"id":"sec-3","text":"Headings: the outline people navigate","level":2}],"takeaways":["The elements header, nav, main, aside and footer create landmarks that screen reader users can list and jump between.","A page has one main landmark; when there are several nav or aside regions, give each a distinct accessible name.","Headings form the page’s outline; choose the level for structure, never for font size, and style the size with CSS.","Start with one h1 that names the page, and don’t skip levels on the way down."],"further":[{"title":"W3C WAI: Page Structure Tutorial","url":"https://www.w3.org/WAI/tutorials/page-structure/"},{"title":"MDN: The HTML section heading elements","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements"},{"title":"W3C APG: Landmark Regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/"}],"quiz":[{"q":"Ticketly has two navigation menus: the site menu at the top and a “Festival days” menu in the sidebar. A screen reader lists the landmarks as “navigation, navigation”. What is the best fix?
\n","options":[{"text":"Give each nav an accessible name, for examplearia-label="Site" and aria-label="Festival days"","why":"Correct. Screen readers then announce “Site navigation” and “Festival days navigation”, so users can tell them apart."},{"text":"Change the sidebar menu to a div so only one navigation remains","why":"That removes a useful landmark instead of naming it. Users lose a fast way to reach the day menu."},{"text":"Add role="navigation" to both nav elements","why":"nav already has the navigation role; repeating it changes nothing about the duplicate announcement."}],"answer":0},{"q":"A designer wants the “Friday pass” title to look small, so the developer used an h5 right after an h2. What is wrong, and what is the fix?
","options":[{"text":"Nothing; any heading level is fine as long as the text is descriptive","why":"Descriptive text matters, but levels convey hierarchy. Jumping from h2 to h5 suggests missing sections and confuses outline navigation."},{"text":"Use a bold paragraph instead, because headings shouldn’t be small","why":"A bold paragraph isn’t a heading at all, so it disappears from heading navigation. Headings can be any visual size."},{"text":"Use an h3 for the structure and make it small with CSS","why":"Correct. The level describes where the content sits in the outline; font size is a styling decision that belongs in CSS."}],"answer":2},{"q":"Which element creates a landmark only when it has an accessible name?
","options":[{"text":"<main>","why":"main is always the main landmark; it doesn’t need a name."},{"text":"<nav>","why":"nav is always a navigation landmark. A name only helps tell several navs apart."},{"text":"<footer> directly inside body","why":"A footer that isn’t nested inside article, aside, main, nav or section is always the contentinfo landmark."},{"text":"<section>","why":"Correct. A section becomes a region landmark only when it is labelled, for example with aria-labelledby pointing to its heading."}],"answer":3},{"q":"On a long Ticketly page, what does a screen reader user most often do first to find the “Refund policy” part?
","options":[{"text":"Listen to the whole page from the top","why":"That is the slowest strategy, and few experienced users do it on long pages."},{"text":"Press Tab repeatedly until they reach it","why":"Tab only visits interactive elements such as links and fields, so headings and paragraphs are skipped entirely."},{"text":"Jump between headings, for example with the H key in NVDA","why":"Correct. In WebAIM’s 2026 survey, 67.8% of screen reader users navigate long pages by headings first."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nSAR 180, standing.
\nSAR 320, both nights.
\nTwo nights of music on the old harbour wall, 12 and 13 June.
\nSAR 180, standing.
\nSAR 320, both nights.
\nTicketly’s home page is built from anonymous divs, and its headings were chosen for their font size. Restructure the markup without changing the text:
\n<header>, and make the menu a <nav> (give it a name such as aria-label="Site").<main>.<footer> outside main.<h1>, and fix the other headings so the outline has no skipped levels: Line-up and Tickets are sections; the two passes belong under Tickets.Landmark elements cost nothing visually but give screen reader users a map: header (banner), nav (navigation), main and footer (contentinfo). The heading levels now describe nesting rather than size: one h1 for the page, h2 for its two sections, and h3 for the passes inside Tickets. The CSS keeps the passes small, because size is a styling decision. Navigating by headings now reads like a table of contents: Harbour Lights 2026, Line-up, Tickets, Friday pass, Weekend pass.
\n","checkLabels":{"one-main":"There is exactly one main landmark holding the festival content","banner-nav":"A top-level header contains a nav with the menu links","footer":"A top-level footer contains the Terms link","one-h1":"“Harbour Lights 2026” is the page’s only h1","heading-order":"Headings start at h1 and never skip a level; the passes sit one level under Tickets"}},"words":703,"readMinutes":3}