-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathinstall.html
107 lines (97 loc) · 8.69 KB
/
install.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Bookmarklets : Highlight accessibility features of web pages">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Accessibility Bookmarklets</title>
<style type="text/css">
.footnote-symbol {
color: crimson;
font-size: 1.25rem;
font-weight: bold;
line-height: 1.0;
}
</style>
</head>
<body>
<!-- HEADER -->
<header id="header_wrap" class="outer" role="banner">
<div class="inner">
<a href="/"><h1 id="project_title"><span class="highlight">Accessibility</span> Bookmarklets</h1></a>
<h2 id="project_tagline">Highlight accessibility features of web pages</h2>
</div>
<nav id="main-navigation" class="outer">
<ul class="inner">
<li><a href="/">Home</a></li><li><a href="/install.html">Installation</a></li><li><a href="/documentation.html">Documentation</a></li>
</ul>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer" role="main">
<section id="main_content" class="inner">
<div id="main-content">
<article class="markdown-body entry-content" itemprop="mainContentOfPage">
<h2>Installation and Usage</h2>
<p>A bookmarklet is a link that contains JavaScript. When a bookmarklet link is activated,
the browser runs the JavaScript code that it contains.</p>
<p>In each of the five rectangles below, the label in its upper-right corner is an Accessibility
Bookmarklet link. The labels are: Landmarks, Headings, Lists, Images and Forms. Each bookmarklet
link must be installed separately, but you can successively install any combination of them to
suit your needs.</p>
<p>The most common way of installing a bookmarklet is to drag and drop the bookmarklet link
into your browser's bookmarks or favorites toolbar. The shortcut for toggling the display of the
bookmarks toolbar in Chrome, Firefox and Safari is <code>Shift + Ctrl/Cmd + B</code>.</p>
<p>There are alternative, browser-specific installation methods such as copying the link location
of the bookmarklet link and pasting it into the Location field of a bookmark that you create using
your browser's Bookmark Manager or Show All Bookmarks feature.</p>
<ul class="bookmarklet">
<li class="bookmarklet"><div class="landmarks bookmarklet"><a class="bookmarklet landmarks" href="javascript:if(window.a11yLandmarks)window.a11yLandmarks.run();else{(function(){var%20link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://accessibility-bookmarklets.org/build/styles.css';document.getElementsByTagName('head')[0].appendChild(link);var%20script=document.createElement('script');script.type='text/javascript';script.src='https://accessibility-bookmarklets.org/build/landmarks.js';document.getElementsByTagName('head')[0].appendChild(script);})();}">Landmarks</a></div><p>Highlights all ARIA landmarks, including HTML5 tags that are interpreted as landmarks</p></li>
<li class="bookmarklet"><div class="headings bookmarklet"><a class="bookmarklet headings" href="javascript:if(window.a11yHeadings)window.a11yHeadings.run();else{(function(){var%20link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://accessibility-bookmarklets.org/build/styles.css';document.getElementsByTagName('head')[0].appendChild(link);var%20script=document.createElement('script');script.type='text/javascript';script.src='https://accessibility-bookmarklets.org/build/headings.js';document.getElementsByTagName('head')[0].appendChild(script);})();}">Headings</a></div><p>Highlights all H1 through H6 elements on a page</p></li>
<li class="bookmarklet"><div class="lists bookmarklet"><a class="bookmarklet lists" href="javascript:if(window.a11yLists)window.a11yLists.run();else{(function(){var%20link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://accessibility-bookmarklets.org/build/styles.css';document.getElementsByTagName('head')[0].appendChild(link);var%20script=document.createElement('script');script.type='text/javascript';script.src='https://accessibility-bookmarklets.org/build/lists.js';document.getElementsByTagName('head')[0].appendChild(script);})();}">Lists</a></div><p>Highlights every ordered list, unordered list, and definition list on a given page, along with how many list items exist for each list</p></li>
<li class="bookmarklet"><div class="images bookmarklet"><a class="bookmarklet images" href="javascript:if(window.a11yImages)window.a11yImages.run();else{(function(){var%20link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://accessibility-bookmarklets.org/build/styles.css';document.getElementsByTagName('head')[0].appendChild(link);var%20script=document.createElement('script');script.type='text/javascript';script.src='https://accessibility-bookmarklets.org/build/images.js';document.getElementsByTagName('head')[0].appendChild(script);})();}">Images</a></div><p>Highlights the types of images on a page, along with their alt text</p></li>
<li class="bookmarklet"><div class="forms bookmarklet"><a class="bookmarklet forms" href="javascript:if(window.a11yForms)window.a11yForms.run();else{(function(){var%20link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://accessibility-bookmarklets.org/build/styles.css';document.getElementsByTagName('head')[0].appendChild(link);var%20script=document.createElement('script');script.type='text/javascript';script.src='https://accessibility-bookmarklets.org/build/forms.js';document.getElementsByTagName('head')[0].appendChild(script);})();}">Forms</a></div><p>Highlights form-related elements and provides information on their associated labelling techniques, grouping labels and ARIA roles</p></li>
</ul>
<img src="images/bookmarklets.gif" alt="illustration of bookmarklets installation" class="installation"/>
<h2>How to Use</h2>
<p>Once installed, these bookmarklets can interact with most web pages.<span class="footnote-symbol">*</span></p>
<ul>
<li>To activate, click a bookmarklet in your bookmarks or favorites bar</li>
<li>To de-activate, simply click it again or refresh your page</li>
<li>It will also de-activate when you resize your window or navigate to another page</li>
</ul>
<p>You can run multiple bookmarklets on the same page at the same time. See the <a href="/documentation.html">documentation</a> for more about using each bookmarklet.</p>
<p><span class="footnote-symbol">*</span> Some web pages have Content Security Policies
that do not allow web browsers to run inline scripts. Because bookmarklets are functionally
equivalent to inline scripts (when activated, they are inserted into the DOM of the web page),
the browser will prevent any and all bookmarklets from running on such pages.</p>
<h2>Supported Browsers</h2>
<p>The drag-and-drop installation works on modern desktop browsers including:
<ul>
<li>Chrome, Firefox, Opera, and Internet Explorer 9+ on Windows 7, 8.x, and 10</li>
<li>Chrome, Firefox, Safari, and Opera on OS X</li>
<li>Bookmarklets are <strong>not</strong> currently supported on iOS and Android mobile devices</li>
</ul>
</p>
</article>
</div>
</div>
<!-- FOOTER -->
<footer id="footer_wrap" class="outer" role="contentinfo">
<div class="inner">
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
</div>
</footer>
<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-71373370-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>