ARIA Landmarks in practice guide

ARIA Landmarks in practice
ARIA and HTML5 Landmarks – v 0.1
Domenico Monaco – monaco.d@gmail.com
Attribuzione - Condividi allo stesso modo 3.0
[Commons Deed] [Legal Code]

Cos’è WAI ARIA
• WAI-ARIA è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che
definisce una serie di attributi HTML addizionali che possono essere applicati agli
elementi per fornire maggior valore semantico e migliorare l'accessibilità
dovunque sia necessario.
• Ci sono tre caratteristiche principali definite nella raccolta:
• Ruoli
• Proprietà
• Stati
• Gli attributi WAI-ARIA è che non influiscono sulla pagina, eccetto che sulle
informazioni fornite dalla API di accessibilità del browser (dalla quale i lettori di
schermo prendono le informazioni). WAI-ARIA non cambia la struttura della
pagina, il DOM o altro, anche se i suoi attributi possono essere utili per
selezionare gli elementi in CSS.
2ARIA Landmarks in practice - Domenico Monaco09/05/20

WAI ARIA compatibilità
• Supporto dei browser in generale è molto buono. Al momento della stesura di
questo articolo, il sito caniuse.com riporta un livello globale di supporto di WAI-
ARIA nei vari browser di circa l'88%.
• Il supporto di ARIA nei lettori di schermo non è al momento a un livello
comparabile, ma i lettori di schermo più popolari stanno facendo grandi sforzi per
migliorare la compatibilità con WAI-ARIA. Puoi farti un'idea del livello di supporto
leggendo l'articolo (in inglese) Compatibilità dei lettori di schermo con WAI-ARIA .
• https://caniuse.com/
• https://www.powermapper.com/tests/screen-readers/aria/

Quando usare WAI-ARIA
• WAI-ARIA è utile:
• Indicatori/riferimenti: gli attributi role possono funzionare come descrizioni che fanno riferimento a elementi HTML5 replicandone il valore semantico (per esempio <nav>),
oppure possono andare oltre HTML5, e funzionare come indicatori che descrivono differenti aree funzionali, per esempio search, tabgroup, tab, listbox, ecc.
• Aggiornamento dinamico del contenuto: i lettori di schermo in generale hanno difficoltà a indicare quando il contenuto subisce cambiamenti; con ARIA possiamo usare aria-
live per indicare agli utenti che usano lettori di schermo quando un' area del contenuto viene aggiornata, per esempio tramite XMLHttpRequest, o DOM APIs .
• Migliorare l'accessibilità da tastiera: ci sono elementi HTML che hanno accessibilità da tastiera nativa; quando però invece di usare tali elementi se ne usano altri che li "simulano"
in combinazione con JavaScript, l'accessibilità da tastiera e la qualità di lettura dei lettori di schermo ne risentono. In questi casi possiamo usare WAI-ARIA per dare focus a tali
elementi (usando tabindex).
• Accessibilità dei controlli non semantici: quando si usano una serie di <div> annidati in combinazione con CSS e JavaScript per creare una funzionalità IU particolarmente
complessa, oppure quando un controllo nativo viene notevolmente modificato tramite JavaScript, l'accessibilità può risultare danneggiata. Gli utenti che usano lettori di schermo
troveranno difficile capire come funzionano tali elementi se non ci sono indicazioni semantiche che lo spieghino. In situazioni come queste la tecnologia ARIA può aiutare a fornire
le indicazioni necessarie tramite una combinazione di ruoli come button, listbox, o tabgroup, e proprietà come aria-required o aria-posinset.
• Ricorda: dovresti ricorrere a WAI-ARIA solo quando è necessario! Idealmente, dovresti usare sempre funzionalità HTML native per fornire le indicazioni semantiche necessarie ai
lettori di schermo per interpretare correttamente il contesto. A volte però ciò non è possibile, forse perchè non hai pieno controllo sul codice, o perchè stai creando qualcosa di
particolarmente complesso, che non puoi implementare con un elemento HTML standard. In tali casi, WAI-ARIA può essere un utile strumento di miglioramento dell'accessibilità.
• Use ARIA only when necessary. Start from accessibilities rules of native HTML.
• No ARIA is better than Bad ARIA
• Incorrect ARIA misrepresents visual experiences, with potentially devastating effects on their corresponding non-visual experiences.

ARIA
General Principles
• Landmarks 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 in the markup using
landmark roles. The use of landmarks 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.
• This section is intended to assist designers, developers and quality
assurance staff in defining and understanding the importance of logical,
usable, and accessible layout for assistive technologies using HTML
sectioning elements and ARIA landmark roles.
• 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.

Step 1: Identify the logical structure
• Break the page into perceivable areas called "areas".
• Typically, designers indicate areas visually using alignment and
spacing of content.
• Regions can be further defined into logical sub-areas as needed.
• An example of a sub-area is a portlet in a portal application.

Step 2: Assign landmark roles to each area
• Assign landmark roles based on the type of content in the area.
• banner, main, complementary and contentinfo landmarks should be
top level landmarks.
• Landmark roles can be nested to identify parent/child relationships of
the information being presented.

Step 3: Label each area
• If a specific landmark role is used more than once on a web page, it
should have a unique label.
• If an area begins with a heading element (e.g. h1-h6), it can be used
as the label for the area using aria-labelledby attribute.
• If an area does not have a heading element, provide a label using
the aria-label attribute.
• Avoid using the landmark role as part of the label. For example, a
navigation landmark with a label "Site Navigation" will be announced
by a screen reader as "Site Navigation Navigation". The label should
simply be "Site".

ARIA Landmarks Example
Visually outline the landmarks and/or headings on
the page using the following buttons
• https://www.w3.org/TR/wai-aria-
practices/examples/landmarks/HTML5.html
• HTML Sectioning Elements
• It is important to understand that many HTML sectioning
(e.g. main, nav, aside ...) elements by default define ARIA landmarks.
If HTML sectioning elements are used without understanding the
associated landmark structure, assistive technology users will most
likely be confused and less efficient in accessing content and
interacting with web pages.

09/05/20 ARIA Landmarks in practice - Domenico Monaco 10
HTML Element Default Landmark Role
aside complementary
footer contentinfo when in context of the body element. The footer element is not a contentinfo landmark
when it is a descendant of the following HTML sectioning elements:
article
aside
main
nav
section
form form when it has an accessible name using aria-labelledby, aria-label or title attributes
header banner when in context of the body element. The header element is not a banner landmark when it is a
descendant of the following HTML sectioning elements:
article
aside
main
nav
section
main main
nav navigation
section region when it has an accessible name using aria-labelledby, aria-label or title attribute

WAI ARIA/ HTML5
Landmarks
• Banner
• Complementary
• Contentinfo
• Form
• Main
• Navigation
• Region
• Search

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 sponsor, and site-specific
search tool. A banner usually appears
at the top of the page and typically
spans the full width.
• ARIA 1.1
Specification: banner landmark.
• Design Patterns
• Each page may have
one banner landmark.
• The banner landmark should be a top-
level landmark.
• When a page contains
nested document and/or application r
oles (e.g. typically through the use
of iframe and frame elements),
each document or application role
may have one banner landmark.
• If a page includes more than
one banner landmark, each should
have a unique label. = ?

The HTML header element defines
a banner landmark when its context is
the body element
• The HTML header element is not
considered a banner landmark
when it is descendant of any of
following elements:
• article
• aside
• main
• nav
• section
• HTML Example
• <header>
<h1>website information<h1>
.... banner content....
</header>

A role="banner" attribute is used to define
a banner landmark
• ARIA Example
• <div role="banner">
<h1>page title identifying website<h1>
.... banner content....
</div>

Complementary Landmark
• A complementary landmark is a
supporting section of the
document, designed to be
complementary to the main
content at a similar level in the
DOM hierarchy, but remains
meaningful when separated from
the main content.
• ARIA 1.1
Specification: complementary land
mark
• Design Patterns
• complementary landmarks should
be top level landmarks (e.g. not
contained within any other
landmarks).
• If the complementary content is
not related to the main content, a
more general role should be
assigned (e.g. region).
one complementary landmark,
each should have a unique label.

Use the HTML aside element to define
a complementary landmark.
• HTML Example: One Complementary Landmark on Page
• When only one complementary landmark on a page, a label is
optional.
• <aside>
<h2>Title for complementary area<h2>
.... complementary content area ....
</aside>
• HTML Example: Multiple Complementary Landmarks
• When there is more than one complementary landmark on a
page, each should have a unique label.
• <aside aria-labelledby="comp1">
<h2 id="comp1">Title for complementary area 1</h2>
... complementary content area 1 ...
</aside>
<aside aria-labelledby="comp2">
</aside>

A role="complementary" attribute is used
to define a complementary landmark.
• ARIA Example: One Complementary Landmark on Page
• When only one complementary landmark exists on a page, a
label is optional.
• <div role="complementary">
<h2>Title for complementary area<h2>
.... complementary content area ....
</div>
• ARIA Example: Multiple Complementary Landmarks
• When there is more than one complementary landmark on a
page, each should have a unique label.
• <div role="complementary" aria-labelledby="comp1">
</div>
<div role="complementary" aria-labelledby="comp2">
</div>

Contentinfo Landmark
• A contentinfo landmark is a way to
identify common information at the
bottom of each page within a website,
typically called the "footer" of the
page, including information such as
copyrights and links to privacy and
accessibility statements.
• ARIA 1.1
Specification: contentinfo landmark.
• Design Patterns
• Each page may have
one contentinfo landmark.
• The contentinfo landmark should be a
top-level landmark.
nested document and/or application r
oles (e.g. typically through the use
of iframe and frame elements),
each document or application role
may have one contentinfo landmark.
one contentinfo landmark, each

The HTML footer element defines
a contentinfo landmark when its context is
the body element.
• The HTML footer element is not
considered
a contentinfo landmark when it
is descendant of any of following
elements:
• article
• aside
• main
• nav
• section
• HTML Example
• <footer>
<h2>Contact, Policies and
Legal<h2>
.... contentinfo area content ....
</footer>

A role="contentinfo" attribute is used to
define a contentinfo landmark.
• ARIA Example
• <div role="contentinfo">
<h2>Contact, Policies and Legal<h2>
.... contentinfo area content ....
</div>

Form Landmark
• A form landmark identifies a region that contains a
collection of items and objects that, as a whole,
combine to create a form when no other named
landmark is appropriate (e.g. main or search).
• ARIA 1.1 Specification: form landmark
•
• Design Patterns
• Use the search landmark instead of
the form landmark when the form is used for
search functionality.
• A form landmark should have a label to help users
understand the purpose of the form.
• A label for the form landmark should be identified
using aria-labelledby to visible heading element
(e.g. an h1-h6 element).
• If a page includes more than one form landmark,
each should have a unique label.
• Whenever possible, controls contained in
a form landmark in an HTML document should use
native host semantics:
• button
• input
• select
• textarea

If a form element has an accessible name it is
considered form landmark.
• HTML Form Landmark
Example
• Assume the following
two forms (e.g. add
contact and add
organization) can be
independently
submitted from the
same web page.
Source Code
<form aria-labelledby="contact">
<fieldset>
<legend id="contact">Add Contact </legend>
... form controls add contact ...
</fieldset>
</form>
...............
<form aria-labelledby="organization">
<fieldset>
<legend id="organization">Add Organization
</legend>
... form controls add organization ...
</fieldset>
</form>

The role="form" attribute defines a form
landmark
• HTML Form
Landmark Example
• Assume the
following two forms
(e.g. add contact
and add
organization) can be
independently
submitted from the
same web page.
<div role="form" aria-labelledby="contact">
<fieldset>
</fieldset>
</div>
...............
<div role="form" aria-labelledby="organization">
<fieldset>
</legend>
</fieldset>
</div>

Main Landmark
• A main landmark identifies the primary or dominant content
of the page
• main is unique for page and not contains repeatable
elements.
•
ARIA 1.1 Specification: main landmark
•
• Design Patterns
• One visible main landmark per page.
• A document must not have more than one main element that
does not have the hidden attribute specified.
• The main landmark should be a top-level landmark.
nested document and/or application roles (e.g. typically
through the use of iframe and frame elements),
each document or application role may have
one main landmark.
• If a page includes more than one main landmark, each should
have a unique label.
• It should not contain any content that is repeated across
documents such as sidebars, navigation links, copyright
information, site logos, and search forms.
• <main> element must NOT be a descendant of an <article>,
<aside>, <footer>, <header>, or <nav> element.
• main can contains multiple ie. article

Use the HTML main element to define
a main landmark
• HTML Example: One Main Landmark
• When only one main landmark on a page, a label is optional.
• <main>
<h1>title for main content<h1>
.... main content area ....
</main>
• HTML Example: Multiple Main Landmarks
• When there is more than one main landmark on a page, each
• <main aria-labelledby="title1">
<h1 id="title1">title for main content area 1<h1>
.... main content area 1 ....
</main>
....
<main aria-labelledby="title2” hidden>
<h1 id="title2">title for main content area 2<h1>
.... main content area 2 ....
</main>

The role="form" attribute defines a form
landmark
• HTML Form
Landmark Example
• Assume the
following two forms
(e.g. add contact and
add organization)
can be
independently
submitted from the
same web page.
<div role="form" aria-labelledby="contact">
<fieldset>
</fieldset>
</div>
...............
<div role="form" aria-labelledby="organization">
<fieldset>
</legend>
</fieldset>
</div>

Navigation Landmark
• Navigation landmarks provide a
way to identify groups (e.g. lists)
of links that are intended to be
used for website or page content
navigation.
• ARIA 1.1
Specification: navigation landma
rk
•
• Design Patterns
one navigation landmark, each
• If a navigation landmark has an
identical set of links as
another navigation landmark on
the page, use the same label for
each navigation landmark.

Use the HTML nav element to define
a navigation landmark
• HTML Example: One Navigation Landmark
• When only one navigation landmark on a page, a label is optional.
• <nav>
<h2>title for navigation area<h2>
<ul>
<li><a href="page1.html">Link 1</a></li>
.....
</ul>
</nav>
• HTML Example: More Than One Navigation Landmark Example
• When there is more than one navigation landmark on a page, each should have a
unique label.
• <nav aria-labelledby="nav1">
<h2 id="nav1">title for navigation 1<h2>
<ul>
.....
</ul>
</nav>
....
<nav aria-labelledby="nav2">
<h2 id="nav2">title for navigation 2<h2>
<ul>
.....
</ul>
</nav>

A role="navigation" attribute is used to
define a navigation landmark.
• ARIA Example: One Navigation Landmark
• When only one navigation landmark on a page, a label is optional.
• <div role="navigation">
<h2>title for navigation area<h2>
<ul>
.....
</ul>
</div>
•
• ARIA Example: More Than One Navigation Landmark
• When there is more than one navigation landmark on a page, each should have a
unique label.
• <div role="navigation" aria-labelledby="nav1">
<h2 id="nav1">title for navigation area 1<h2>
<ul>
.....
</ul>
</div>
....
<div role="navigation" aria-labelledby="nav2">
<h2 id="nav2">title for navigation area 2<h2>
<ul>
.....
</ul>
</div>

Region Landmark
• A region landmark is a perceivable
section containing content that is
relevant to a specific, author-
specified purpose and sufficiently
important that users will likely
want to be able to navigate to the
section easily and to have it listed
in a summary of the page.
• ARIA 1.1
Specification: region landmark
•
• Design Patterns
• A region landmark must have a
label.
one region landmark, each should
have a unique label.
• The region landmark can be used
identify content that named
landmarks do not appropriately
describe.

Use the HTML section element to define
a region landmark
• HTML Example: Using section[aria-labelledby] attribute
• Defines a label for each region using existing content on the
page.
• <main>
<h1>title for main content area<h1>
<section aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-labelledby="region2">>
</section>
</main>
• HTML Example: Using section[aria-label] attribute
• Defines a label for each region using attribute value that is
only visible to assistive technologies.
• <main>
<section aria-label="title for region area 1">
<h2>title for region area 1</h2>
</section>
<section aria-label="title for region area 2">
</section>
</main>
HTML Example: Using section[title] attribute
Defines a label for each region using attribute value
that maybe available as a tooltip on some
browsers.
<main>
<section title="title for region area 1">
...content for region area 1...
</section>
<section title="title for region area 2">>
...content for region area 2...
</section>
</main>

A role="region" attribute is used to define
a region landmark.
• ARIA Example: Using section[aria-labelledby] attribute
• <div role="main">
<h1>title for main content area<h1>
<div role="region" aria-labelledby="region1">
</div>
<div role="region" aria-labelledby="region2">
</div>
</main>

Search Landmark
• A search landmark contains a
collection of items and objects
that, as a whole, combine to
create search functionality to
content on the website.
• ARIA 1.1
Specification: search landmark
• Design Patterns
• Use the search landmark instead
of the form landmark when the
form is used for search
functionality.
one search landmark, each

There is no HTML
element that defines
a search landmark.
35

A role="search" attribute is used to define
a search landmark.
<form role="search">
<input type="search" aria-label="search text" size="20">
<input type="submit" value="Search">
</form>

Resources & Reference
• Read More
• ARIA11: Using ARIA landmarks to identify
regions of a page (WCAG 2.0 Technique)
• ARIA20: Using the region role to identify a
region of the page (WCAG 2.0 Technique)
• WAI-finding with ARIA Landmark Roles (A List
Apart)
• Using WAI-ARIA Landmarks – 2013 (Paciello
Group)
• HTML 5 and ARIA Landmarks (Deque
University)
• Basic screen reader commands for
accessibility testing (Paciello Group)
• Screen Reader User Survey #6 Results:
Landmarks/Regions (WebAIM)
• Tools
• Landmarks Browser Extension
• Accessibility Bookmarklets: Landmark
Bookmarklet
• The Visual ARIA Bookmarklet
• SkipTo, version 2.0 (PayPal)
• AInspector Sidebar for Firefox (Landmark Rule
Category)
• Functional Accessibility Evaluator
2.0 (Landmark Rule Category)

• http://whatsock.com/training/matrices/visual-aria.htm
• http://paypal.github.io/skipto/#
• https://fae.disability.illinois.edu/pages/1703486b9d9b30cc/rc/all/pag
e/1/
• https://www.w3.org/TR/html-aria/
• https://html.spec.whatwg.org/multipage/grouping-
content.html#hierarchically-correct-main-element
• https://www.w3schools.com/tags/tag_main.asp
• https://webaim.org/standards/wcag/checklist

ARIA Landmarks in practice guide

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ARIA Landmarks in practice guide

Similar to ARIA Landmarks in practice guide (20)

More from Domenico Monaco

More from Domenico Monaco (10)

Recently uploaded

Recently uploaded (20)

ARIA Landmarks in practice guide