-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
92 lines (80 loc) · 5.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html class="no-js" lang="en"><!-- specify language: http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1 -->
<head prefix="og: http://ogp.me/ns#"><!-- enable Open Graph: http://ogp.me/ -->
<!-- charset & http-equiv may be set via response header: https://github.com/h5bp/html5-boilerplate/blob/master/doc/html.md#x-ua-compatible -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>A11Y Boilerplate</title>
<meta name="description" content="The Accessibility Boilerplate is a basic HTML template to kickstart your web project responsibly.">
<meta name="keywords" content="a11y, accessibility, html5, boilerplate, template, aria, landmark roles, structure, banner, search, navigation, contentinfo">
<meta property="og:image" content="http://voorhoede.github.io/a11y-boilerplate/a11y-boilerplate.png">
<meta property="og:url" content="http://voorhoede.github.io/">
<!-- optionally add more Open Graph metadata: http://ogp.me/#metadata -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- specify viewport: https://developers.google.com/speed/docs/insights/ConfigureViewport -->
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<!-- Enable styling differentation between JavaScript and non-JavaScript enabled browsers -->
<script>(function (e) { e.className = e.className.replace('no-js', 'js'); }(document.documentElement));</script>
<!-- Enable styling of HTML5 sectioning elements in legacy browsers. Simplified inline version of HTML5Shiv (https://github.com/aFarkas/html5shiv) for enhanced performance -->
<!--[if lt IE 9]>
<script>
(function (d, a) {
d.documentElement.className = 'lt-ie9'; var l = a.length; while(l--){ d.createElement(a[l]); }
}(document, ['HEADER', 'NAV', 'SECTION', 'FOOTER', 'ARTICLE', 'MAIN', 'FIGCAPTION', 'FIGURE', 'ASIDE']));
</script>
<![endif]-->
<!-- Include stylesheets here. Concatenate & minify for performance: https://developers.google.com/speed/docs/insights/MinifyResources -->
</head>
<body>
<header role="banner" class="site-header">
<a class="site-logo" href="http://voorhoede.github.io/" rel="home" title="to homepage">
<!-- link to home: http://microformats.org/wiki/rel-home -->
<h1>
<img alt="A11Y Boilerplate"
src="a11y-boilerplate.svg"
onerror="this.src='a11y-boilerplate.png;'"
width="200" height="200"
/>
<!-- vector image with bitmap fallback: https://twitter.com/scottjehl/status/369190249437483008 -->
<!-- specify image dimensions for performance: http://www.feedthebot.com/pagespeed/image-dimensions.html -->
</h1>
</a>
<!-- Quick menu (skipnav) to directly jump to specific sections: http://www.jimthatcher.com/skipnav.htm -->
<nav class="site-header-quick-menu">
<h2 class="a11y-sr-only">Quick menu</h2>
<ul class="flat-list">
<li><a class="menu-link a11y-kb-only" href="#content">Jump to content</a></li>
<li><a class="menu-link a11y-kb-only" href="#main-menu">Jump to main menu</a></li>
<li><a class="menu-link a11y-kb-only" href="#search">Jump to search</a></li>
<li><a class="menu-link a11y-kb-only" href="#meta-menu">Jump to meta menu</a></li>
<li><a class="menu-link a11y-kb-only" href="#user">Jump to user menu</a></li>
</ul>
</nav>
<!-- Mark search controls for enhanced a11y: http://www.w3.org/TR/wai-aria/roles#search -->
<div role="search" class="search-menu">
<a id="search" rel="search" href="https://example.com/search">
<span class="icon-search"></span>
<span class="a11y-sr-only">Search</span>
</a>
<form method="GET" action="https://www.example.com/search" class="search-menu-form">
<label>
<span class="a11y-sr-only">Keywords</span>
<input type="search" name="q" placeholder="keyword(s)" />
</label>
<button>
<span class="icon-search"></span>
<span class="a11y-sr-only">Search on example.com</span>
</button>
</form>
</div>
</header>
<main id="content" role="main" tabindex="-1">
<!-- tabindex fixes focus issue, alternatively use generic script: http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/ -->
<!-- @todo: add nav[role="navigation"] as TOC -->
</main>
<footer role="contentinfo" class="site-footer">
<p>The A11Y Boilerplate is a project by <a href="http://voorhoede.nl">De Voorhoede</a>.</p>
<p>The code is licensed under <a href="https://github.com/voorhoede/a11y-boilerplate/blob/master/LICENSE">MIT License</a>. So use it however you like.</p>
</footer>
<!-- Include scripts here. Concatenate & minify for performance: https://developers.google.com/speed/docs/insights/MinifyResources -->
</body>
</html>