HTML and CSS Reference
In-Depth Information
ARIA document structure
and landmark roles
WAI-ARIA defines several roles that tell assistive technology
about landmarks and the structure of a document. Some of
these are:
•
application
•
article
•
banner
•
complementary
•
contentinfo
•
document
•
form
•
heading
•
main
•
navigation
•
search
Looking at a simple page from an ARIA perspective, you might
see what is shown in
Figure 2.18
.
FIguRE 2.18
A simple page
with a header, sidebar, and
main content area and ARIA
roles.
Banner
Content
Some of these obviously match HTML5 elements, such as
<article>
,
<form>
,
<header>
, and
<nav>
.
Others lack an obvious one-to-one correspondence. For exam-
ple,
role=banner
“typically includes things such as the logo or
identity of the site sponsor, and site-specific search tool. A ban-
ner usually appears at the top of the page and typically spans
the full width.” That initially seems to match HTML5
<header>
, but
as you've seen, there can be multiple
<header>
s on a page. So
the “page header” is the only one allowed to have
role=banner
.
