HTML and CSS Reference
In-Depth Information
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
it's only the “page footer” and not each footer in a page with
multiple footers.
role=main
defines 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). A small polyfill at
http://github.com/yatil/accessifyhtml5.js
adds roles to the most
common, generic HTML5 cases, but note that (sadly) it won't
magically accessify heavy-duty AJAXed web apps.
ARIA resources
There is a useful cross-reference in the spec of HTML5 and
Faulkner of The Paciello Group has a list of ARIA information
that HTML5 doesn't have built-in at
www.paciellogroup.com/
For more information on ARIA in general, see Gez Lemon's
“Introduction to WAI-ARIA” at
http://dev.opera.com/articles/
view/introduction-to-wai-aria/
and follow The Paciello Group's
blog
(
www.paciellogroup.com/blog/
). Two recommended topics
are Universal Design for Web Applications by Wendy Chisholm
and Matt May (O'Reilly) and Designing with Progressive
