In the physical world, landmarks are objects such as a stone or a tree that marks the boundary of land. But on websites, landmarks mean something quite different and are an important topic to understand for website ADA compliance.
What are website landmarks?
Landmarks on a website provide a powerful way to identify the organization and structure of a web page. The structural information conveyed visually to users should be represented programmatically by a developer in the markup using landmark roles. The use of landmark roles support keyboard navigation to the structure of a web page for screen reader users, and can be used as targets for author supplied "skip links" and browser extensions for enhanced keyboard navigation.
Due to the complexity of today's web content, if using landmarks, all perceivable content should reside in a semantically meaningful landmark in order that content is not missed by the user.
How can we create landmarks in a website?
A developer will need to use either HTML 5 landmarks or their ARIA equivalents to mark sections of the layout in the design, so that screen reader users can easily find their way around the layout. However, it is best to use native HTML elements rather than their ARIA equivalents whenever possible. That said, the end result is effectively the same for screen reader users, so either one can be used. Adding ARIA roles to existing markup can sometimes be easier to manage, because adding new HTML elements can sometimes alter the visual appearance (and require extra CSS work), whereas ARIA roles do not.
Here are the HTML5 elements and corresponding ARIA roles:
|
HTML5
|
ARIA Role
|
Listed Among Landmarks by Most Screen Readers
|
|
<header>
|
role="banner"
|
Yes
|
|
<nav>
|
role="navigation"
|
Yes
|
|
n/a
|
role="search"
|
Yes
|
|
<main>
|
role="main"
|
Yes
|
|
<footer>
|
role="contentinfo"
|
Yes
|
|
<aside>
|
role="complementary"
|
Yes
|
|
<section>
|
role="region"
|
Mixed support: Most screen readers list it only if given a name via aria-label or aria-labelledby.
Note that if each section has a heading, screen reader users will be able to navigate by headings, so it is usually not necessary to give each section or region a name, and in fact it can be a bad idea to supply too many landmarks in a page, because it slows down the user's ability to sort through them all.
|
|
<article>
|
role="article"
|
Mixed support: JAWS lists it, but other screen readers do not
|
|
<form>
|
role="form"
|
Mixed support: Screen readers list forms only if marked as role="form" (the <form> element will be ignored in landmark lists)
|
Keep in mind that the most useful landmarks on websites are header/banner, nav/navigation, main, and footer/contentinfo. However a page should not contain more than one instance of each of the following landmarks: banner, main, and contentinfo. All of the others may be used as well, but they are not as widely applicable across most websites.
Make sure your site uses landmarks
Landmarks are important because they provide a powerful way to identify the organization and structure of a web page and there is no technical limit on the number of landmarks you can implement in a page, but one of the main purposes of landmarks is to allow screen reader users to quickly find and navigate to the appropriate landmark. For this reason, you should keep the total number of landmarks relatively low. If you don't, screen reader users will have to sort through too much extra information to find what they're looking for.
Want to learn more about other ADA conformance best practices? Talk to a website conformance specialist at ZAG Interactive.
posted by
Danielli Franquim
Sr. QA & Certified Accessibility Analyst
Share this article
ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide.
See current job openings.