What are landmarks and why are they important for web accessibility?

What are landmarks and why are they important?

When you visit a website, you're probably navigating visually and intuitively: you see the menu, a header, the content, and a footer. But for users who rely on screen readers, that works quite differently. They rely on structure and landmarks to understand how a page is structured.

Landmarks are HTML elements such as <main>, <nav>, <header>, <footer>, <aside> and <section>. They serve as beacons on a page, allowing screen reader users to quickly navigate between the main sections of the website.

Why are landmarks important?

• Accessibility: People with visual disabilities or cognitive challenges can navigate through a site faster and more efficiently.
• Usability: A clear structure also helps search engines and users who use keyboard navigation. So you explicitly don't just use this for accessibility. The search engines also benefit from this!
• WCAG compliance: According to the Web Content Accessibility Guidelines (WCAG), the use of landmarks is recommended to meet key accessibility criteria.

How do you control the use of landmarks?

An easy way to test whether your website actually uses landmarks is using the browser extension. Accessibility Insights for the Web.

1. Automatic scanning with FastPass

With Accessibility Insights' FastPass feature, you can quickly detect accessibility issues, including missing or misplaced landmarks.

Steps:

• Install the extension from the Chrome Web Store.
• Open your web page in the browser.
• Click on the extension and launch a FastPass scan.
• See the “Landmarks” section in the results overview. You will receive immediate visual feedback about existing landmarks and possible gaps.

2. Manual monitoring via 'Assessment' mode

In addition to the automatic scan, Accessibility Insights also offers a manual evaluation. This allows you to check more thoroughly whether landmarks have been applied correctly and are functioning properly.

Here's how it works:

• Go to the Ad Hoc tools extension
• Choose the part “Landmarks”.
• The tool shows you the landmarks that are currently set on the page

Best practices for using landmarks

• Use just one <main> per page.
• Use <nav> for primary or secondary navigation elements.
• Place global elements such as <header> and <footer> outside <main>, or within specific sections for local context.
• Prevent redundant or overlapping landmarks.
• Provide clear and unique roles per landmark, especially with multiple navigation areas.

Set up landmarks in Elementor (WordPress)

Do you work with Elementor in WordPress? Then you can also use landmarks within this visual builder to make your site more accessible. Elementor offers standard HTML tags for sections, so you can easily choose the right semantics.

How to set up a landmark:

1. Please select one Section whether Inner Section in your Elementor canvas.
2. In the left menu, go to the tab “Advanced”.
3. Open the section “HTML Tag” (under “Layout” in older versions).
4. Choose the appropriate HTML tag here, such as <header>, <nav>, <main>, <footer> whether <aside>.

Please note that you only one <main> per page and that you always use navigation elements within a <nav> posts. By applying this consistently, you help screen readers and better comply with the WCAG guidelines.

Integrate landmarks into your design process

At Ambasco, we include accessibility from the first design sketch. We provide a clear hierarchy in both visual and semantic design. Our Developers and Content Creators work closely together to build websites that are not only beautiful and functional, but also accessible to everyone.

Need help improving the accessibility of your website or app? Or do you want to know if your current setup complies with WCAG guidelines? Feel free to contact us.