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.