UXPA 2021: Accessibility Foundations: Using Landmarks and Sectioning Elements

Using
landmarks and
sectioning
elements
Beth Whitmer & Pavani Gonuguntla
September 1, 2021

© 2021 CGI Inc. External
About CGI
CGI: Global IT and business consulting services firm
• 78,000 professionals worldwide
• Trusted partner to over 5,500 clients globally
• 95% on-time, within-budget delivery
• 9 out of 10 clients would recommend us for further work
Accessibility Practice: CGI Federal’s dedicated team of accessibility experts
• Team of subject matter experts (SMEs) with deep knowledge of Section 508 and digital accessibility
• Internal consultants who independently advise and assess the accessibility of our teams’ solutions
2

Agenda
1. Landmarks – Overview of what landmarks are and why they’re important
2. Types – List the different types of landmarks
3. Putting it together – Defining multiple landmarks on a webpage
4. UX considerations – Recommendations for design, development, and testing
5. Wrap-up – Summarize key takeaways and time for questions/discussion
3

© 2021 CGI Inc.
Landmarks
4

Landmarks in the real world
According to the Merriam-Webster
dictionary, a landmark is "an object that
marks the boundary of land.”1
Physical landmarks orient people to
their surroundings and help guide their
navigation through an unfamiliar area.
Web landmarks play a similar role.
Source: 1 Merriam-Webster Dictionary. (2021). Landmarks.
Retrieved 16 August 2021 from the Merriam-Webster
website: https://www.merriam-webster.com/dictionary/landmark
5

Landmarks on a webpage
Landmarks convey the structure of a
webpage to end users.
They divide the webpage into a series
of organized regions that signal where
distinct types of content can be found.
Example: Perkins Access Home page
(https://perkinsaccess.org/).
6

Landmarks are important to users of assistive technology
When landmarks are defined correctly,
blind people who use screen reader
software to read and interact with digital
content can use their screen reader to:
• Orient themselves to the
programmatic structure of a page
• Navigate quickly to important areas
of a page
• Skip over blocks of content that are
repeated on multiple pages
7

© 2021 CGI Inc.
Types
8

Banner
Identifies site-oriented content within a website, such as:
• the website logo or identity of the site sponsor
• the site-specific search tool
Examples:
• BBC website header (https://www.bbc.com/) containing the site logo, navigation menu, and a search.
• Getty images website header (https://www.gettyimages.co.uk/) containing a hamburger menu, various
navigation links, and the site logo.
9

Main
Contains the main content in a
document
Example: Main content area of the Nielsen
Norman Group Reports & Book page
(https://www.nngroup.com/reports/)
10

Contains information about the parent document such as terms, copyrights and links to
privacy statements
Examples: Footer of the IAAP website (https://www.accessibilityassociation.org/).
Contentinfo
11

Navigation
A collection of links suitable for use when navigating
the document or related documents like site
preferences, primary and secondary site navigation,
the breadcrumb trail, and the left navigation sidebar
Examples:
• Primary navigation and breadcrumbs on the Chrome
Developers website (https://developer.chrome.com/)
• Top site navigation on the Gap Home page
(https://www.gap.com/)
12

Search
Identifies a section of the page used to
search the page, site, or collection of sites
Examples:
• Search feature on the Old Navy website
(https://oldnavy.gap.com/)
• Search feature on the WebAIM website
(https://webaim.org/)
• Search feature on the Chrome Developers
website (https://developer.chrome.com/)
13

• Represents a collection of form-
associated elements, some of which can
represent editable values that can be
submitted to a server for processing
• Should be used for a form when no
other named landmark is appropriate
(e.g. search, etc.)
Example: Form landmarks on the LOFT website
(https://www.loft.com/profile/myAccount.jsp)
named “Existing Customers: Sign In” and
“Create an Account”.
Form
14

Complementary
• Supports the main content, yet is separate and meaningful on its own
• If the content is not related to the main content, a more general role should be assigned (e.g.
region)
Example: Complementary landmark on the LinkedIn Feed (https://www.linkedin.com/feed/) to show
additional articles for “LinkedIn News”.
15

Region
Represents a significant section of content (e.g. top products, an error handling section,
dashboard cards, etc.) when there is no other landmark role that applies
Example: Region landmark on the J.Crew Home page to show additional product categories named
“More you need to see” (https://www.jcrew.com/)
16

Summary: Landmark types
Landmark Purpose
banner Identifies site-oriented content (typically the header)
main Contains the main content of a page
contentinfo Contains information about the parent document (typically the footer)
navigation Contains a collection of links for navigating the page or site
search Identifies content used to search the page, site, or collection of sites
form Contains form-associated elements
complementary Supports the main content but is separate and meaningful on its own
region Any other region/section of content
17

© 2021 CGI Inc.
Putting it together
18

Top-level landmarks
• Some landmarks are “top-level landmarks”, which means that they should not be contained
within other landmarks.
• Top-level landmarks include:
• banner
• main
• contentinfo
• complementary
• These landmarks are the easiest to find and navigate to using assistive technology (AT).
19

The following landmarks should only be
defined once per document:
• banner
• main
• contentinfo
Typically means that you will only have one
of these landmarks per webpage. However,
if the webpage has multiple documents (via
frames or iframes) then each individual
document can have its own banner, main,
and contentinfo landmark.
The following landmarks can be defined
multiple times:
• navigation
• search
• form
• complementary
• region
In any scenario where the same type of
landmark is used more than once, it must
be uniquely named to describe its
purpose.
Multiple landmarks of the same type
20

Sample Home
page
Contains the following landmarks:
• banner
• navigation
• search
• main
• contentinfo
21

© 2021 CGI Inc.
UX considerations
22

Landmark responsibilities per UX role
Design
Designers identify the logical
structure of the page:
• Break the page into
perceivable content
"areas”
• Further define regions as
logical sub-areas as
needed
• Indicate areas and sub-
areas visually using
alignment and spacing of
content
Development
Developers implement the
landmarks:
• Code the landmarks
based on direction from
the designer
• Define a unique
“accessible name” in
cases where it is needed
Testing
Testers verify the
functional experience:
• Validate landmarks are
correctly defined using
an accessibility testing
tool
• Confirm that landmarks
function as expected
with AT like a screen
reader
23

© 2021 CGI Inc.
Design
24

Best practices
Designers should keep the following best practices in mind for landmarks:
1. Include all content on the webpage within a landmark based on the visual presentation
2. Do not overuse landmarks
3. Annotate landmarks and other structural elements in mockups so that developers have
clear direction when coding them
25

• As a general rule, all content on the page
should reside in a landmark.
• This makes it so that screen reader users
can easily jump to the distinct sections
of content on the page without missing
any content.
1: Include all content on the webpage within a landmark
26

2: Do not overuse landmarks (aka “landmark overload”)
• Even though you want all page content included within a landmark, defining too many
landmarks can reduce their effectiveness.
• For example, you want to avoid enclosing every set of links on the page within a navigation
landmark.
27

3: Annotate landmarks in mockups
Designers can designate landmarks and other structural elements in their mockups, which
helps developers build webpages that match the designer’s expectations.
28

© 2021 CGI Inc.
Development
29

Key concepts
WCAG
• The Web Content
Accessibility Guidelines
(WCAG) comprise
globally-recognized
technical standards that
define how to make web
content accessible to
people with disabilities.
• Defining landmarks helps
satisfy WCAG Success
Criteria 1.3.1 Info and
Relationships and 2.4.1
Bypass Blocks.
ARIA
• Accessible Rich Internet
Applications (ARIA)
comprises a set of
attributes that make
web content more
accessible to people
with disabilities.
• Before HTML5,
developers used ARIA
role attributes to define
landmarks (e.g.
role=“main”,
role=“navigation”, etc.)
HTML5
• New sectioning
elements were
introduced in HTML5 to
define the various parts
of a webpage and
organize content.
• Developers do not need
to define both an ARIA
role and an HTML5
sectioning element to
create a landmark; only
one approach is
required.
30

Is there a preferred method – HTML5 or ARIA?
The “First Rule of ARIA Use” is:
If you can use a native HTML element or attribute with the semantics and
behavior you require already built in, instead of re-purposing an element and
adding an ARIA role, state or property to make it accessible, then do so.1
Source: 1 W3C. (2021). Using ARIA. Retrieved 16 August 2021 from the W3C website: https://www.w3.org/TR/using-aria/#rule1
For new development it is recommended that you use HTML5 elements instead of the ARIA
roles to create landmarks. However, keep in mind the following:
• The search landmark can only be defined using an ARIA role since there is currently no
HTML5 equivalent.
• It is not a failure if a website uses ARIA roles instead of HTML5 elements to create
landmarks.
31

• Some landmarks require an accessible name, either by default or to uniquely identify them.
The accessible name is the name announced by a screen reader to identify the landmark.
• The accessible name for a landmark can be defined using one of the following attributes:
– aria-label
– aria-labelledby
– title
• Example: A navigation landmark with an accessible name of “main” will be announced by a
screen reader as “main navigation”.
Accessible name
32

Coding landmarks (1 of 2)
Landmark HTML5
sectioning
element
HTML5 rules ARIA role
Banner <header> • <header> element defines a banner landmark
when its context is the <body> element
• <header> element is not considered a banner
landmark when it is descendant of following
elements: article, aside, main, nav and section
role=“banner”
Main <main> N/A role=“main”
Contentinfo <footer> • <footer> element defines a contentinfo landmark
when its context is the <body> element
• <footer> element is not considered a contentinfo
landmark when it is descendant of following
elements: article, aside, main, nav and section
role=“contentinfo”
33

Coding landmarks (2 of 2)
Landmark HTML5
sectioning
element
HTML5 rules ARIA role
Navigation <nav> N/A role=“navigation”
Search N/A (does
not exist)
N/A role=“search”
Form <form> Not a landmark by default; must have an
accessible name defined to be a landmark
role=“form”
Complementary <aside> N/A role=“complementary”
Region <section> Not a landmark by default; must have an
accessible name defined to be a landmark
role=“region”
34

Testing landmarks
We recommend testing landmarks using the following the following:
• The ANDI bookmarklet (Accessible Name and Description Inspector) to:
– Visually highlight the landmarks on the page
– Verify that landmarks have an accessible name (if needed and if they've been provided by its
author)
• A screen reader to validate the functional user experience
36

ANDI testing
• The ANDI bookmarklet visually highlights structural elements on the page, such as
landmarks.
• To test, first install the ANDI bookmarklet and then navigate to the page you want to test.
– ANDI’s testing results are divided up into manageable chunks referred to as “modules”
– You can change the module using the dropdown in the top left
– Choose the ‘structures’ option from the dropdown and then the ‘landmarks’ link
37

ANDI output
Visualizes the landmarks defined on the
page to help you determine whether:
• Everything that’s supposed to be in the
landmark is in the landmark
• There is any content in the landmark that
shouldn’t be
• In cases where it is needed, the
accessible name is correctly defined for
the landmark as displayed in the “ANDI
Output” field
ANDI will highlight all of the landmark regions on the page.
38

Screen reader testing
Many screen readers feature keyboard shortcuts that allow
users to quickly jump between landmarks:
• In JAWS, use the R key to jump to the next landmark, Shift +
R to go backward through landmarks, Q key to jump to the
main landmark, or Insert+CTRL+R to bring up a list of
landmarks
• In NVDA, use the D key to jump to the next landmark, or use
shift + D to go backward through landmarks
• In VoiceOver, use CTRL+ALT+U to start the web rotor, then,
if necessary, use the left or right arrow keys to display the list
of landmarks (the rotor also displays lists of headings, links,
and web spots), then use the down arrow key to navigate
through the list of landmarks
39

Sample landmarks testing checklist
Test using ANDI to verify:
 All content on the page is contained
within a landmark
 The correct type of landmark is defined
based on the content contained within it
 The accessible name for the landmark is
accurately defined (if applicable)
 The accessible name is meaningful and
descriptive of the content within the
landmark (if applicable)
Test using the screen reader to verify:
The correct landmark type/role is
announced (e.g. navigation, etc.)
The accessible name is announced by
the screen reader (if applicable)
You can skip to each landmark using the
corresponding keyboard shortcut
You see the correct list of landmarks
displayed when you bring up a list of the
landmarks/regions
40

Key takeaways
• Landmarks build the core foundation on which an accessible website is built.
• When defined correctly, landmarks can help screen readers quickly and efficiently navigate
the page.
• Landmarks should be considered by all UX roles:
• Designers should designate the visual presentation areas to be defined as landmarks
within mockups
• Developers should code landmarks using either HTML5 sectioning elements or ARIA
landmark roles
• Testers should verify landmarks are implemented correctly using an accessibility testing
tool like the ANDI bookmarklet as well as AT like a screen reader
42

Resources
• One of the primary resources we reference for landmarks is the W3C ARIA Landmarks
Example site (https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html).
• Other helpful resources include:
• HTML5 Landmarks Exposed - Scott O'Hara:
https://www.scottohara.me/blog/2019/04/05/landmarks-exposed.html
• HTML5 and ARIA Landmarks - Deque: https://dequeuniversity.com/assets/html/jquery-
summit/html5/slides/landmarks.html
• Improving access to landmark navigation - The Paciello Group:
https://developer.paciellogroup.com/blog/2017/05/improving-access-to-landmark-navigation/
• HTML5 Sectioning and Landmark Elements - Keith J. Grant:
https://keithjgrant.com/posts/2018/03/html5-sectioning-and-landmark-elements/
• Web Accessibility Tutorials - W3C: https://www.w3.org/WAI/tutorials/page-structure/regions/
43

About us
Elizabeth Whitmer, CGI
elizabeth.whitmer@cgifederal.com
Twitter: @WhitmerBeth
Pavani Gonuguntla, CGI
pavani.gonuguntla@cgifederal.com
Twitter: @PavaniS508
45

UXPA 2021: Accessibility Foundations: Using Landmarks and Sectioning Elements

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Semelhante a UXPA 2021: Accessibility Foundations: Using Landmarks and Sectioning Elements

Semelhante a UXPA 2021: Accessibility Foundations: Using Landmarks and Sectioning Elements (20)

Mais de UXPA International

Mais de UXPA International (20)

Último

Último (15)

UXPA 2021: Accessibility Foundations: Using Landmarks and Sectioning Elements

Notas do Editor