HTML5 and CSS3, Second Edition

(singke) #1
<footerid="footer"role="contentinfo">
<p>Copyright© 2013AwesomeCo.</p>
<nav>
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Termsof Service</a></li>
<li><ahref="#">Privacy</a></li>
</ul>
</nav>
</footer>

</body>
</html>

The Welcome section has an ID of welcome, which matches the anchor in the
navigation bar. We declare our additional page sections in the same fashion.

html5_aria/homepage/index.html
<sectionid="services">
<header>
<h2>Services</h2>
</header>
<p>The servicessection</p>
</section>

<sectionid="contact">
<header>
<h2>Contact</h2>
</header>
<p>The contactsection</p>
</section>

<sectionid="about">
<header>
<h2>About</h2>
</header>
<p>The aboutsection</p>
</section>

This markup wraps our four content regions:


html5_aria/homepage/index.html
<sectionid="content"
role="document"aria-live="assertive"aria-atomic="true">

The attributes on this line tell screen readers that this region of the page has
content that may update.

Chapter 5. Making Accessible Interfaces • 100


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf