Text - Introducing HTML5 - page 50

Some of these obviously match HTML5 elements, such as
<article> , <form> , <heading> , and <nav> .
Others do not have such an obvious one-to-one correspon-
dence. For example, role=banner “typically includes things such
as the logo or identity of the site sponsor, and site-specifi c
search tool. A banner 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> is on a page. So the “page header” is the only one
allowed to have role=banner .
Similarly, contentinfo is defined as “A large perceivable region
that contains information about the parent document. Examples of
information included in this region of the page are copyrights and
links to privacy statements.” This sounds like <footer> , but only the
“page footer” and not each footer in a page with multiple footers.
role=main defi nes the “main content area” of a page. We dis-
cussed in Chapter 1 how that can be algorithmically deduced,
but as assistive technologies can make use of ARIA now, it
makes sense to add this role to the element you're using to
group your main content. You can even use it as a hook for
CSS in browsers that understand attribute selectors:
div[role=main] {color:red; background-color:yellow;
¬ font-family: “Comic Sans MS”, cursive; ... }
There you have it: accessibility and gorgeous typography in
perfect harmony.
Combining ARIA and HTML5
We recommend that you consider using ARIA where appropri-
ate in addition to HTML5 as a transitional measure to improve
accessibility that won't harm validation (but see the following
note on screen readers). However, we don't do that in this topic
(as we're teaching you HTML5, not ARIA).
ARIA resources
There is a useful cross-reference in the spec of HTML5 and ARIA
at dev.w3.org/html5/spec/embedded-content-0.html#annotations-
for-assistive-technology-products-aria . Steve Faulkner of The
Paciello Group has a list of ARIA information that is not built-in to
HTML5 at www.paciellogroup.com/blog/?p=585 .