The brief
The library has an event page built entirely from generic containers. The browser displays it, but the source gives readers little help identifying its main topic or moving past navigation. Your job is to improve the structure without changing the event information. This is a common maintenance task: working visual output is not proof that a document is understandable to assistive technology.
Give the page a main landmark containing one top-level heading. Keep the registration section inside that main region and give it a second-level heading. The navigation link should resolve to that section using a matching ID. Treat the navigation as a separate region, with a useful accessible name. A footer can remain outside main because its site-level information is repeated across pages.
Notice the distinction between changing markup and adding ARIA. Replacing a generic wrapper with main exposes a native landmark; adding a role to every wrapper would create more work and more opportunities for contradiction. Likewise, use an actual heading rather than assigning a heading role to a styled paragraph. Your solution should remain understandable before any stylesheet loads.
Requirements
- One main landmark: Put the event content in exactly one main element.
- Main topic is a heading: Use one h1 inside the main landmark.
- Registration is a named subsection: A section with id="booking" and an h2 makes this part of the page addressable and understandable.
- Navigation points to registration: Use a real fragment link inside a labeled navigation region.
Build and check
Write your solution, then check the stated requirements.
Study the solution
<header><p>Library events</p></header>
<nav aria-label="Event"><a href="#booking">Registration</a></nav>
<main>
<h1>Build a web page</h1>
<section id="booking">
<h2>Registration</h2>
<p>Book at the front desk.</p>
</section>
</main>The site header introduces the repeated context. The main landmark contains the unique event content, and the explicit h1/h2 hierarchy works without an implied document outline. The navigation fragment matches the section ID exactly.
This is client-side practice with visible rules. A passing result confirms these checks only.
Review beyond the checks
Read the headings alone: they should summarize the page. Then navigate with Tab and activate Registration. Confirm that the browser moves to the section and that a sticky header does not hide it. In a screen reader, inspect landmarks as a separate step; the checker verifies the chosen element structure but cannot judge whether the region names are useful in context.
An alternative solution can be valid while failing this deliberately specific exercise. For example, a differently named fragment target may work perfectly, but this brief asks for booking so the requirements remain explicit. When reviewing real work, evaluate purpose and behavior rather than forcing every page into this exact nesting pattern.
Continue learning
Inspect a complete document in the markup lab or return to the HTML course.