Skip to content

Instantly share code, notes, and snippets.

@webbower

webbower/a11y.html

Created May 1, 2020 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webbower/abb96b54f79694cc39d8a81419315fce to your computer and use it in GitHub Desktop.
Save webbower/abb96b54f79694cc39d8a81419315fce to your computer and use it in GitHub Desktop.
Download ZIP
Raw
a11y.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a11y for HTML</title>
<style>
/**
* Visually hide an element, but leave it available for screen readers
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
* @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.screen-reader {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/**
* Extends the .screen-reader class to allow the element to be focusable when navigated to via the keyboard
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
* @link https://www.drupal.org/node/897638
*/
.screen-reader-focusable:active,
.screen-reader-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: normal;
width: auto;
}
/**
* @workaround Remove focus from <main> element when using tabindex="-1" hack for skipnav link
* @link https://code.google.com/p/chromium/issues/detail?id=37721
*/
.tabindex:focus {
outline: none;
}
</style>
</head>
<body>
<a class="screen-reader screen-reader-focusable" href="#secondary-nav">Skip to Course Navigation</a>
<a class="screen-reader screen-reader-focusable" href="#main">Skip to the main content</a>
<a class="screen-reader screen-reader-focusable" href="mailto:your@email.com&subject=Accessibility%20Feedback">
Accessibility Feedback
</a>
<nav>Main navigation elements...</nav>
<main id="main" class="tabindex" tabindex="-1">The main content</main>
<nav class="tabindex" id="secondary-nav" tabindex="-1">Secondary nav content...</nav>
<form>
<label class="screen-reader" for="search">Search criteria</label>
<input type="text" id="search" name="search" value="">
<input type="submit" value="Search">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment