-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathskip-to-main-content-keyboard-accessible.html
53 lines (52 loc) · 2.67 KB
/
skip-to-main-content-keyboard-accessible.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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Skip to Main Content - Keyboard Accessible</title>
<style type="text/css">
a.skip-main {
left:-999px;
position:absolute;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
color: #fff;
background-color:#000;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow:auto;
margin: 10px 35%;
padding:5px;
border-radius: 15px;
border:4px solid yellow;
text-align:center;
font-size:1.2em;
z-index:999;
}
</style>
</head>
<body><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-40224544-1', 'ncsu.edu'); ga('send', 'pageview'); </script>
<a class="skip-main" href="#main">Skip to main content</a>
<h1>Skip to Main Content - Keyboard Accessible</h1>
<ul>
<li><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>
<p id="main" tabindex="-1">This is the main content. In this example you will note that the "Skip to main content" link appears when I tab through the page. This allows keyboard-only users, in addition to screen reader users, an easy way to skip repetitive navigation. The key components to implementing this are</p>
<ol>
<li>provide a link at the top of the page that says "skip to main content"</li>
<li>have it link to an internal ID further down in the page where the main content begins.</li>
<li>put a tabindex="-1" attribute on the target ID to add support for Chrome and IE</li>
<li>use CSS :focus and :activate to make the skip link visible when the user tabs to it</li>
</ol>
<p>For <a href="http://accessibility.oit.ncsu.edu/blog/">more tutorials visit http://accessibility.oit.ncsu.edu/blog/</a>.</p>
</body>
</html>