Transcript
PRESENTER: This tutorial explores ARIA landmark roles. We're going to cover what are landmark roles and why use them, and then the banner, complementary, contentinfo, form, main, navigation, region, and search landmarks.
Section 1, what are landmark roles and why use them?
Landmark roles, or sometimes referred to as landmarks, help to programmatically identify sections of a web page. Landmarks help assistive technology users orientate themselves on a page and help them navigate easily to various sections of a page. Landmarks also provide an easy way for assistive technology users to skip over blocks of content that are repeated on multiple pages.
For example, if there's a common navigation menu found on every page, landmark roles can be used to skip over it and navigate from section to section. This saves assistive technology users and keyboard users from having to tab through large amounts of content to find what they're really after, much like a traditional skip links mechanism.
Landmark roles are generally well supported by JAWS, NVDA, and voiceover. Roles are announced to assistive technology users along the lines of navigation landmark. Users can use keyboard shortcuts or, in the case of JAWS and voiceover, a dialog box to navigate around web pages via landmark roles.
In this example, there's a nav element with a landmark role of navigation. Now, for most modern browsers and assistive technologies, there's no need to include the native HTML5 element, as well as the role attribute. And this is because the HTML5 nav element is already announced as navigation. However, to support IE 11 and previous versions of IE, the native element and the role attribute should be used together.
Section 2, the banner landmark.
A banner landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site's sponsor and site-specific search tools. A banner usually appears at the top of the page and typically spans the full width. Each page can only contain one banner landmark.
But the banner landmark should be a top-level landmark. And that means it shouldn't be contained within any other landmarks. The banner landmark can be used in conjunction with the header element. Other landmark regions can be included inside the header element, such as the nav element.
Section 3, the complementary landmark.
The complementary landmark is used to describe a region that is complementary to the main content, such as an aside. This content still should be meaningful when separated from the main content.
The complementary landmark should be a top-level landmark. And that means it shouldn't be contained within any other landmarks. The complementary landmark can be used in conjunction with the aside element. If a page contains more than one complementary landmark, each one should have a unique label. If the complementary content is not related to the main content, a more general role should be assigned, such as region.
Section 4, the contentinfo landmark.
The contentinfo landmark can be used to identify common information at the bottom of every web page, typically called the footer of the page. Footer information can include copyright information and links to privacy and accessibility statements.
Each page may have one contentinfo landmark. The contentinfo landmark should be a top-level landmark. And that means it shouldn't be contained within any other landmarks. This landmark can also be used in conjunction with the footer element.
Section 5, the form landmark.
The form landmark is used to describe a region that is a form, but only when no other named landmark is appropriate, such as main or search. If the form's used for search functionality, the search landmark should be used instead.
If the form landmark is present, the element should have a label to help users understand the purpose of the form. This label can be achieved using the ARIA labelled by attribute and associated with a visible heading element. In this example, the container has an ARIA label value of contact, which matches the ID value applied to the legend element.
The form landmark should not be used directly on the form element, as it can override the native form semantics. Instead, the landmark can be placed on a div element, which is then wrapped around the outside of the form element. If the page includes more than one form landmark, it should have a unique label. In this example, the container has been given an ARIA labelled by attribute with a value of organization, which matches the ID value applied to the legend element.
Section 6, the main landmark.
The main landmark is used to describe the primary content of the page. Each page should have one main landmark.
The main landmark should be a top-level landmark. And this means it shouldn't be contained within any other landmarks. This landmark can be used in conjunction with the main element.
Section 7, the navigation landmark.
The navigation landmark provides a way of identifying groups of links that are intended to be used for website or page content navigation. This landmark can be used in conjunction with the nav element.
Developers may want to include more than one navigation landmark, such as for primary and secondary navigation. If the page includes more than one navigation landmark, each should have a unique label. In this example, there are two containers, each with a role of navigation. Both of them have ARIA labelled by, and that points to the same ID value on the h2 element inside.
Section 8, the region landmark.
The region landmark is used to identify a section of content that's important enough to stand on its own. The region landmark can be used to identify content that name landmarks do not appropriately describe. A region landmark must have a label. This landmark can be used in conjunction with the section element.
If a page uses more than one region landmark, each should have a unique label. In this example, there are two divs with a role of region. Each has an ARIA labelled by attribute and a matching ID value on the h2 element.
Section 9, the search landmark.
The search landmark is used to describe a region that's a form, but only one with search functionality for the content on a website. The search landmark should not be used directly on the form element, as it can override the native form semantics. Instead, the landmark can be placed on something like a div element, which is then wrapped around the outside of the form element.
If a page contains more than one search landmark, each should be given a unique label. In this case, the div with the role of search has an ARIA labelled by value of main-search. And inside the form, the h2 has a matching ID value.
Conclusion. Landmark roles help programmatically identify sections of a web page. They're designed to help assistive technology users orientate themselves within web pages and navigate to specific sections of a page. The intent with landmarks is not to try and use every single landmark on a page, but to identify page sections in a logical and practical manner. So there you have it-- a simple explanation of landmark roles.
Except where otherwise noted, this work is licensed under Creative Commons by Attribution-ShareAlike 4.0 license. Copyright 2018. California Community Colleges Chancellor's Office. These works are licensed under Creative Commons Attribution 4.0 International license. They are available to everyone and may be repurposed to meet the unique needs of educational institutions.