Figure 15—A mock-up of the home page using jQuery to change the main content
Creating the Page
We’ll start by creating a basic HTML5 page and we’ll add our Welcome section,
which will be the default section displayed to users when they visit the page.
Here’s the code for the page with the navigation bar and the jump links:html5_aria/homepage/index.html
<!DOCTYPEhtml>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<title>AwesomeCo</title>
<linkrel="stylesheet"href="stylesheets/style.css">
</head>
<body>
<headerid="header"role="banner">
<h1>AwesomeCo</h1>
<nav>
<ul>
<li><ahref="#welcome">Welcome</a></li>
<li><ahref="#services">Services</a></li>
<li><ahref="#contact">Contact</a></li>
<li><ahref="#about">About</a></li>
</ul>
</nav>
</header>
<sectionid="content"
role="document"aria-live="assertive"aria-atomic="true"><sectionid="welcome">
<header>
<h2>Welcome</h2>
</header>
<p>The welcomesection</p>
</section>
</section>report erratum • discussCreating an Accessible Updatable Region • 99
Download from Wow! eBook <www.wowebook.com>