What Are Landmarks?
HTML landmarks are like major landmarks in a big city—the park, the library, the capital building—instantly recognizable areas or buildings that serve a specific purpose.
Landmarks identify specific sections and their purpose within an HTML document. This makes it easier for people with assistive technology to quickly find what they're looking for.
Some common HTML elements function as landmarks by default:
- <header> Introduces the webpage, often containing logos and navigation menus.
- <nav> The primary navigation section allows users to jump to different parts of the site.
- <main> The core content area, where users find the primary information.
- <aside> Supplemental content that complements the main content but is distinct from it (think sidebars).
- <footer> The closing section, often containing copyright information and contact details.
Why Are Landmarks Important?
Landmarks are essential for website accessibility. They empower users with disabilities to navigate websites independently, ensuring everyone has equal access to information.
Landmarks also benefit sighted users. Clearly structuring your website allows users to find information faster, leading to a more positive interaction with your brand.
Using Landmarks for Accessible Websites
Here's how to create a website with clear and effective landmarks:
- Use the correct elements - Employ the standard HTML sectioning elements (<header>, <nav>, <main>, etc.) for their designated purposes.
- Descriptive content - Ensure the content within each landmark clearly reflects its purpose. For example, the <main> content should be the most important information on the page.
- ARIA Attributes - In some cases, consider adding ARIA roles to modify older HTML elements to gain the added benefits of landmarks to existing HTML. To further enhance the landmarks' functionality for assistive technologies, you can also consider using aria-labels to further distinguish landmarks like the different navigation areas within your web pages.
How ARIA landmark roles help screen reader users
For more detailed information on landmark use and design, please see the article "Landmark Regions," published by the W3C.
"Including all perceivable content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs." ~ W3C
Resources