Nguyen Nguyen, 24/11/2020
What does “main landmark” or “navigation landmark” mean, exactly? Besides the actual content of a web page, there is other content aiming to improve your browsing experience. For instance, navigation regions, a classical and reliable tool, help users know where they are on the current web page. Let’s have a closer look at the tool and see how we could apply it in building an inclusive web page.
Landmarks
Let’s start with the definition:
“A type of region on a page to which the user may want quick access. Content in such a region is different from that of other regions on the page and relevant to a specific user purpose, such as navigating, searching, perusing the primary content, etc.”
So basically a landmark is a region on a web page that the user might want to access quickly and that could be made accessible using assistive technologies, such screen readers. The WAI-ARIA guidelines provide multiple roles, for example, role=”navigation”, which define how the assistive technologies should interpret and interact with the region with the role.
The Main Landmark
The main landmark is indicated either by the role=”main”, or to be more succinct, the <main> element. Conventionally, dynamic content which distinguishes a page of a type and another page of the same type, for example, the content of blog post A and the content of blog post B, would be placed in the main content area. There should be only one main landmark throughout a web page. And, depending on the nature of the page, the main landmark may contain these different things:
- For a single-page application, the <main> element should be where the views are rendered.
- For a static website, informational content should be put inside the <main> element.
- For a product page, the <main> should contain the description of the product.
Screen readers, such as JAWS, offer a keyboard shortcut to jump straight to <main>, skipping the verbosity of the page to the desired content.
The Navigation Landmark
The navigation landmark improves the travelling across your pages, making it convenient and time saving for the visitors. It is represented by either the role=”navigation” or the <nav> element. The main difference between the navigation landmark and the main landmark is that there may be more than one navigation landmark for each page. Additionally, the content inside navigation landmarks that appear on multiple pages should be consistent between those pages. The navigation landmark is also discoverable when users traverse the page by region. For example, NVDA screen readers map the D key to going straight to the next navigation landmark of the current page.
The Structure
By standard, landmark regions should consist of an unordered list of links. For the whole site navigation, these links should point to the different existing pages in the site.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/team">Team</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/cases">Cases</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
By using this structure, firstly, we maintain the essential and conventional navigation schemas possible in HTML4 and XHTML, which ensures backwards compatibility. Secondly, grouping the links in a list suggests that those links have a common purpose of navigating to certain pages. Furthermore, in case CSS fails, the region still looks familiar with a bulleted list of blue, underlined text conveying visually that the content has a navigational purpose of a link.
According to Wikipedia and SmashMagazine such a strategy of demarcating the presentation semantics from the content, starting with the core foundation of content and then implementing the presentation in one or more optional layers, depending on the content-browsing condition of the user (e.g what browser is being used, how fast the Internet connection is, etc.), is called progressive enhancement.
Last but not least, building the navigation landmark on this structure provides a great deal of useful information to screen readers. When users of assistive technologies set foot on the page and focus on the first link, they would hear “Navigation landmark”, followed by “List, one of six” and then “Link, home”. Thanks to such verbal information, they would know that they are in the navigation landmark, which consists of six links in total.
The look and placement
Patterns play a vital role in the cognition of human beings. According to Heydon Pickering in his book Inclusive Design Patterns: Coding Accessibility Into Web Design, “Our brain uses patterns called schemata to understand the sense of data. It builds up prior experience against which current experience is evaluated”. In design, following conventions helps users maximize their cognitive cache and not have to think much.
In the case of the site navigation landmark, you should position it in the header of each page, above the main content and preferably anything else. In modern web design, there is a temptation to try new things, to reinvent the wheel with the hope of impressing the users. If you plan to make such a significant change, bear in mind that it usually leads to more development time and risks ruining the familiarity, with which your users are comfortable. Besides, putting page navigation at the top allows the keyboard users to traverse effortlessly from a page to another without having to browse the content if they don’t need it.
Closing words
Navigation regions may look simple at first glance but through the paradigm of accessibility, there are much more things to understand and take care of. Next time, let’s talk a little bit about some more conventions of the navigation landmark before moving to another kind of navigation region, the table of contents.