Skip to content

Instantly share code, notes, and snippets.

@djcowan

djcowan/acc-aa.html

Created November 25, 2022 08:37
Show Gist options
  • Save djcowan/450cc0d7ed13b664c44142c85aa5ab4a to your computer and use it in GitHub Desktop.
Save djcowan/450cc0d7ed13b664c44142c85aa5ab4a to your computer and use it in GitHub Desktop.
Download ZIP
Accessiblity
Raw
acc-aa.html
​<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<style>
.screen-reader-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<a class="screen-reader-only" href="#page-content">Skip to page content</a>
<!-- role support for older browsers -->
<header role="banner">
<h3><i role="img" aria-hidden="true">&hearts; </i>Site Title</h3>
</header>
<!-- role support for older browsers -->
<nav role="navigation" aria-label="Main">
<ul>
<li>
<a href="/"><i role="img" aria-hidden="true">&#x2620; </i>Home Page</a>
</li>
</ul>
</nav>
<!-- role support for older browsers -->
<main id="page-content" role="main">
<h1>Page heading</h1>
<p>Sometimes I like butterflies</p>
<img src="https://via.placeholder.com/350x150" alt="Describe what is in the image">
</main>
<!-- role support for older browsers -->
<footer role="contentinfo">
<nav role="navigation" aria-labelledby="contact-info">
<h3 id="contact-info">
Contact me for a cheap dino knockoff
</h3>
<ul>
<li>
<a href="mailto:" title="Send me an email">
<i role="img" aria-hidden="true">&#x2620;</i>
me@example.com
</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment