212 CHAPTER 5 More HTML5
</article>
<aside>
<!-- Outside the article, so it's related to the sites -->
<h2>Blog Advertising</h2>
<p>You too can have your own blog...</p>
</aside>
</body>The two meanings make sense when you consider that an article should be a complete
unit that can be shared.Using roles
In Figure 5-3, the <aside> element and the <div> element implement the role attribute,
specified by the Web Accessible Initiative (WAI), which specifies the Accessible Rich Internet
Applications (ARIA) suite, called WAI-ARIA.
WAI-ARIA defines the role class hierarchy and how roles are used to provide specific
meaning to screen readers for accessibility purposes. There are many parent role classes, and
there are child role classes that inherit from role classes. One such parent role class is called
the landmark role class, which represents regions of the page intended as navigational land-
marks. The following are child classes of the landmark role class.
■■application An area declared as a web application as opposed to a web document.
■■banner n area on a webpage that has site-specific content, such as site name and A
logo, instead of page-specific content; maximum one per webpage, usually header
content.
■■complementary An area on a webpage that complements the page but still has
meaning if separated from the page.
■■contentinfo An area that contains information about the parent document such as
copyright notices and links; maximum one per webpage, usually footer content.
■■form An area on a webpage that contains a collection of input controls for gathering
data to be sent to the web server; search forms should use the search role.
■■main An area that contains the main content of the document; maximum one per
webpage.
■■navigation An area that contains navigational links.
■■search An area on a webpage that contains a collection of input controls for entering
and displaying search information.
You can use these roles to provide meaning to an area of the webpage, but the new
HTML5 elements already provide meaning. However, the HTML5 elements don’t provide a
new element to identify the main content of the webpage. Instead, all known content is not
the main content, and what’s left over must be the main content. Furthermore, the <aside>
element is used as a sidebar, and you might want to provide more meaning. Why not use the
WAI-ARIA role to provide meaning to other developers and to assistive devices? That is what
is illustrated in Figure 5-3.Key
Te rms