-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathlandmark-heading-nav.html
140 lines (138 loc) · 5.92 KB
/
landmark-heading-nav.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Landmarks Headings Keyboard Navigation Bookmarklet for Accessibility Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
main, aside, footer {margin-top:-1em;}
nav {background-color:Pink; margin-top:2em;}
header {background-color:Beige; }
main {background-color:LightBlue; }
aside {background-color:LightYellow;}
footer {background-color:PeachPuff;}
*:focus { outline: 3px solid #27B; }
footer section { float: left; width: 30%; padding-left:1em; font-size:.8em;}
footer p { clear: both; text-align: center }
#page-wrap { width: 800px; margin: 0 auto;}
header li, aside li { float: left; list-style: none; padding: 0 2em; }
header p, aside p {clear:both;}
aside p {padding-top:1em}
footer span {display:block;}
footer ul {list-style:none; margin-left:-2em;}
#quick-links { float:right; margin-top:-1em;}
#quick-links li { float:none;}
header form {float:right;}
nav p {margin-bottom:-1em;}
form {margin-top:-1em;background-color:Silver; }
</style>
</head>
<body>
<p><a href="index.html"><span aria-hidden="true"><</span> Back to Bookmarklets for Accessibility Testing</a></p>
<h1>Landmarks Headings Keyboard Navigation Bookmarklet for Accessibility Testing</h1>
<p>Enable bookmarklet to make Landmarks, HTML5 Section Elements, and Headings keyboard focusable through TAB navigation and use some quick navigation keys: </p>
<ul>
<li>1, 2, 3, 4, 5, 6 Sets focus to the first Heading Level of each number.</li>
<li>b Sets focus to first <header> or role=banner.</li>
<li>f Sets focus to first <footer> or role=contentinfo.</li>
<li>m Sets focus to first <main> or role=main.</li>
<li>n Sets focus to first <nav> or role=navigation.</li>
<li>s Sets focus to first <search> or role=search.</li>
</ul>
<h2>Installation</h2>
<p><a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmark-heading-nav.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmark-heading-nav.js';}})();">Landmarks Headings Keyboard Navigation Bookmarklet</a> (drag link to bookmarks bar)</p>
<h2>Test Content</h2>
<div id="header" role="banner">A banner image and introductory title</div>
<div id="sitelookup" role="search">....</div>
<div id="nav" role="navigation">...a list of links here ... </div>
<div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
<div id="rightsideadvert" role="complementary">....an advertisement here...</div>
<div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>
<div role="button">not button (nutton)</div>
<div role="application">I have no idea how to ARIA</div>
<div id="page-wrap">
<header> <a href="#">Company Name</a>
<form>
<input type="search" aria-label="Sitewide Search" placeholder="hours, directions, returns">
<input type="submit" value="Search Site">
<br>
</form>
<nav>
<ul>
<li><a href="#">Locations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p><a href="#">Home</a> > <a href="#">Online Outlet</a> > Product Name</p>
</header>
<main>
<h1>Product Name</h1>
<p>Product Image</p>
<p>Product Description</p>
<p>Product Options</p>
<p>
<button>Add Product Name To Cart</button>
</p>
</main>
<aside>
<h2>Related Products</h2>
<ul>
<li><a href="#" aria-label="Previous Set of Related Products"><</a></li>
<li><a href="#">Product Foo</a><br>
<button>Add Foo To Cart</button>
</li>
<li><a href="#">Product Bar</a><br>
<button>Add Bar To Cart</button>
</li>
<li><a href="#">Product Baz</a><br>
<button>Add Baz To Cart</button>
</li>
<li><a href="#" aria-label="Next Set of Related Products">></a></li>
</ul>
<p><a href="#">Sign up for our Email Offers!</a> </p>
</aside>
<footer>
<section>
<h3>Company</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
</ul>
</section>
<section>
<h3>Resources</h3>
<ul>
<li><a href="#">Delivery</a></li>
<li><a href="#">Payment Options</a></li>
</ul>
</section>
<section>
<h3>Customer Service</h3>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Hours</a></li>
</ul>
</section>
<p>© 2018 Company Name, Inc. </p>
</footer>
</div>
<h2>Bookmarklet Demo</h2>
<script type="application/javascript">
function loadJS(file) {
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = file;
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
}
</script>
<button onclick="loadJS('landmark-heading-nav.js');">Enable Landmarks Headings Keyboard Navigation</button>
<h4><a href="iosinstall.html">Not so easy installation method</a></h4>
<label for="jscode">Copy/Paste JavaScript Bookmarklet URL Code</label>
<br>
<textarea id="jscode" rows="4" cols="40">javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmark-heading-nav.js';var iframes=document.getElementsByTagName('iframe');for(i=0;i<iframes.length;i++) {iframes[i].contentDocument.body.appendChild(document.createElement('script')).src='https://cdn.jsdelivr.net/gh/pauljadam/bookmarklets@master/landmark-heading-nav.js';}})();</textarea>
</body>
</html>