jenlampton/a11y-skip-nav-example.html

## a11y-skip-nav-example.html
<html>
	<head>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style>
			.main-content {
				background-color: #ffffcc;
				margin-top: 1px;
				margin-bottom: 1px;
			}
			.inner-content {
				background-color: pink;
			}
			.row {
				background-color: gray;
			}
			.content-area,
			.content-area .row {
				background-color: white;
			}
			.main-content .row {
			 	background-color: #ffffcc;
			}
		</style>
	</head>
	<body>
		<div class="container">

			<header class="row">
				<p>Site Name (this is the header)</p>
			</header>
			<section class="content-area row">

				<div class="container">
					<div class="row">
						<div class="sidebar col-md-3">
							<p>Sidebar with main navitation</p>
							<a href="#main-content">Skip to main content</a> (skips to main content)
							<ul>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
								<li><a href="/">nav item</a></li>
							</ul>
						</div>
						<main class="main-content col-md-9" id="main-content">
							<h1>This is the main content area</h1>

							<div class="row">
								<div class="jump-menu col-md-4">
									<p>Jump-navigation area</p>
									<a href="#main-content">Skip navigation links</a> (skips to juicy content)
									<ul>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
										<li><a href="/">jump menu items</a></li>
									</ul>
								</div>
								<div class="inner-content col-md-8" id="inner-content">
									<h2>This is the juicy content area</h2>
									<p>This is where the important stuff goes</p>
									<p>This is where the important stuff goes</p>
									<p>This is where the important stuff goes</p>
									<p>This is where the important stuff goes</p>
									<p>This is where the important stuff goes</p>
								</div>
							</div> <!-- row -->
						</main>

					</div> <!-- row -->
				</div> <!-- container -->

			</section> <!-- row -->
			<footer class="row">
				<p>this is hte footer</p>
			</footer>

		</div><!-- container -->
	<body>
</html>