Creating Accessible Experience with Landmarks
The idea for this article sparked during a recent prep for a training program. I was collaborating with another accessibility professional on presentation slides when the topic of landmarks and their significance for screen reader users came up. My co-speaker pointedly asked, “Raghav, I’ve never noticed you emphasizing the importance of landmarks or using them to navigate page sections. Is that intentional?”
As I was thinking out loud about this question, I found these reasons:
- In WCAG, SC 2.4.1 Bypass block, landmark is only one of the techniques mentioned to bypass block of contents
- There is no visual demarcation from the user agents for landmarks
- Perhaps, screen reader users use headings more than landmarks while bypassing block of contents.
In order to find whether these assumptions are true, let’s delve a bit deeper into the nuances of landmarks and how they affect the overall user experience!
What are Landmarks?
Landmarks, or landmark roles, are used to identify different sections of a web page programmatically. They assist users of assistive technology in jumping to specific sections of a page while skipping other content blocks.
Landmark Attributes
There are just a few main landmark attributes that can be utilized on a page. Both HTML5 and WAI-ARIA have defined these attributes.
| HTML Element | ARIA Role | Description |
|---|---|---|
| <header> | role=”banner” | Contains the main heading or introductory content. |
| <nav> | role=”navigation” | Holds navigation links like menus or a table of contents. |
| <main> | role=”main” | Carries the main content unique to the page. |
| <aside> | role=”complementary” | Includes content related to the main content, like a sidebar. |
| <section> | role=”region” | Groups related content together, usually with a heading. |
| <article> | role=”article” | Stands alone and makes sense on its own, like a blog post. |
| <footer> | role=”contentinfo” | Contains footer information like copyright or contacts. |
What do Screen Reader users say about Landmarks?
According to a survey by WebAIM on screen reader users, the usage of landmark regions falls into categories like sometimes, seldom, and never.
| Response | # of respondents | % of respondents |
|---|---|---|
| Whenever they’re available | 268 | 17.9% |
| Often | 208 | 13.9% |
| Sometimes | 471 | 31.5% |
| Seldom | 309 | 20.6% |
| Never | 241 | 16.1% |
Personally, I know many screen reader users who rely more on headings and shortcuts they’ve developed over time than using landmarks.
Usage of Landmarks and Screen Readers
In the recent times, screen reader users, especially, tend to rely on landmarks for a quick overview of a page’s layout. Much before landmarks were widely used, they were taught to use the heading structure of a page to navigate quickly to specific sections.
Today, many web pages utilize landmarks such as nav, main, complementary, and footer. If we want to understand the real-time usage of landmarks, for instance, if a screen reader user needs to jump to the footer section, they can use a shortcut and navigate to the content area, though, this isn’t the only method of navigation. Over time, screen reader users develop habits to optimize their productivity, like using shortcut keys to jump to the end of a page and then moving to the previous heading in the footer region.
This is where landmarks play a crucial role. With just a few key presses, a screen reader user can jump to nav, main, footer, etc., while using headings might require multiple key presses to reach the desired content section.
SEO Benefits
Although there’s no definitive proof, based on my experience working in both search engine optimization and accessibility for over a decade, there seems to be a strong correlation between how search engines understand a web page and its use of headings, links, and user experience. Search engines rely on the semantic structure of a web page to gather information.
Microdata, also known as schema structure, includes attributes to mark up navigation, search, and article regions of a page. This helps search engines understand the content presented on the page in a machine-readable format.
Conclusion
As we conclude this exploration of landmarks and their pivotal role in web accessibility, it’s clear that understanding and implementing these elements is crucial for creating an inclusive online environment.
Now armed with insights into the significance of landmarks in facilitating navigation for users of assistive technologies, it’s time to integrate this knowledge into our development practices. By consciously incorporating landmarks into our design and development processes, we take a significant stride towards a more universally accessible web.
Your thoughts and contributions matter. We invite you to share your opinions, experiences, and suggestions in the comments section below this article. Let’s continue this conversation and collectively strive for a web landscape that caters to everyone, regardless of their abilities or devices.
Related reads
- Understanding WCAG Success Criterion 1.3.1 Info and Relationships
- Using Navigation Landmarks by GOV.UK
- Accessible Landmarks by Scotto Hara
- Foundations: Landmarks by TetraLogical
- Landmark Regions by W3C
