-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
101 lines (101 loc) · 9.13 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
93
94
95
96
97
98
99
100
101
<!doctype html>
<html lang="en">
<head>
<style>body{font-family:sans-serif; line-height: 1.5;}</style>
<title>Target size bookmarklets</title>
<meta name="title" content="Target size bookmarklets">
<meta name="description" content="A collection of bookmarklets that help visually identify the majority of click/pointer targets on a webpage. Useful when testing whether a page meets WCAG 2.2 'Target Size' criteria.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://accessibility-tools.github.io/target-size-highlighter/assets/images/social-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://accessibility-tools.github.io/target-size-highlighter/assets/images/social-image.png">
<meta name="twitter:title" content="Target size bookmarklets">
<meta name="twitter:description" content="A collection of bookmarklets that help visually identify the majority of click/pointer targets on a webpage. Useful when testing whether a page meets WCAG 2.2 'Target Size' criteria.">
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
<link rel="icon" type="image/png" href="assets/images/favicon.png">
</head>
<body>
<main>
<h1>Target size bookmarklets</h1>
<p>These bookmarklets are meant to be a way to quickly identify the majority of click/pointer ‘targets’ on a webpage. So they’re easier to visually scan for <a href="https://www.w3.org/TR/WCAG22/#target-size-minimum">WCAG 2.2 criterion ‘Target Size (minimum) 2.5.8’</a>.</p>
<p><strong>Note:</strong> these bookmarklets won't work on some websites, due to the security settings for the website. An example site where they won't work is <a href="https://www.gov.uk/">the main GOV.UK content website</a>.</p>
<h2>How to use these bookmarklets</h2>
<p>The following instructions have been tested on Chrome version 115 and Firefox version 115:</p>
<ol>
<li>Open the <abbr title="hypertext markup language">HTML</abbr> file with your preferred browser</li>
<li>Save each link as a bookmark, by either:
<ul>
<li>(Chrome and Firefox) dragging and dropping the link into the bookmarks bar</li>
<li>(Firefox) opening the right-click (context) menu and selecting the ‘Bookmark link…’ option</li>
</ul>
</li>
<li>Go to a page you want to test, such as pages within the <a href="https://govuk-frontend-review.herokuapp.com/">GOV.UK Design System review app</a>
<li>While on the page, click the newly-added bookmark link in your bookmarks toolbar</li>
<li>Voilà! There should be green or rainbow highlight boxes on various hit target areas</li>
<li>If you’d like, you can pair this bookmarklet set with the 24 pixel circle cursor bookmarklet sets made by Adrian Roselli and Curtis Wilcox:
<ul>
<li><a href="https://codepen.io/aardrian/pen/rNqdJyO">Adrian’s cursors</a></li>
<li><a href="https://codepen.io/ccwilcox/pen/rNqKamK">Curtis’ cursors</a></li>
</ul>
</li>
</ol>
<h2>The 'basic' highlighter bookmarklet</h2>
<p>This bookmarklet applies a background to a selection of <abbr title="hypertext markup language">HTML</abbr> elements that usually have an interactive target area.</p>
<p><a href="javascript:(function(){
var style = document.createElement('style'),
styleContent = document.createTextNode('
/*Basic Target Size Highlighter*/
a:before, a:after, button:before, button:after, input:before, input:after, label:before, label:after, [onclick]::before, [onclick]::after{
outline: rebeccapurple dashed 2px!important;
outline-offset: -2px!important;
box-shadow: inset 1px 1px 0px 2px #fff, inset -1px -1px 0px 2px #fff!important;
background: linear-gradient(135deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 154, 0, 0.5) 10%, rgba(208, 222, 33, 0.5) 20%, rgba(79, 220, 74, 0.5) 30%, rgba(63, 218, 216, 0.5) 40%, rgba(47, 201, 226, 0.5) 50%, rgba(28, 127, 238, 0.5) 60%, rgba(95, 21, 242, 0.5) 70%, rgba(186, 12, 248, 0.5) 80%, rgba(251, 7, 217, 0.5) 90%, rgba(255, 0, 0, 0.5) 100%)!important;
}
a, a>*, button, input, details summary, details summary>*, select, select>*, label, label>*, textarea, textarea>*, [role=link], [role=button]{
outline: black inset 2px!important;
outline-offset: -2px!important;
box-shadow: inset 1px 1px 0px 2px #fff, inset -1px -1px 0px 2px #fff!important;
background: #33996655!important;
filter: none!important;
}'
);
style.appendChild(styleContent );
var caput = document.getElementsByTagName('head'); caput[0].appendChild(style);
})();">
<strong>Basic Target Size Highlighter</strong></a></p>
<p><strong>Note:</strong> this 'basic' version takes a less disuptive approach by applying a background. Because of this, its styles won't visibly affect some target areas with foreground non-text content that covers the full area, such as <img> images.</p>
<h2>The 'advanced' highlighter bookmarklet</h2>
<p>This bookmarklet applies a '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter"><abbr title="cascading style sheets">CSS</abbr> filter</a>' overlay to a selection of <abbr title="hypertext markup language">HTML</abbr> elements that usually have an interactive target area.</p>
<p><a href="javascript:(function(){
var style = document.createElement('style'),
styleContent = document.createTextNode('
/*Advanced Target Size Highlighter*/
a:before, a:after, button:before, button:after, input:before, input:after, label:before, label:after, [onclick]::before, [onclick]::after{
outline: rebeccapurple dashed 2px!important;
outline-offset: -2px!important;
box-shadow: inset 1px 1px 0px 2px #fff, inset -1px -1px 0px 2px #fff!important;
background: linear-gradient(135deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 154, 0, 0.5) 10%, rgba(208, 222, 33, 0.5) 20%, rgba(79, 220, 74, 0.5) 30%, rgba(63, 218, 216, 0.5) 40%, rgba(47, 201, 226, 0.5) 50%, rgba(28, 127, 238, 0.5) 60%, rgba(95, 21, 242, 0.5) 70%, rgba(186, 12, 248, 0.5) 80%, rgba(251, 7, 217, 0.5) 90%, rgba(255, 0, 0, 0.5) 100%)!important;
}
a, a>*, button, input, details summary, details summary>*, select, select>*, label, label>*, textarea, textarea>*, [role=link], [role=button]{
outline: black inset 2px!important;
outline-offset: -2px!important;
box-shadow: inset 1px 1px 0px 2px #fff, inset -1px -1px 0px 2px #fff!important;
filter: invert(52%) sepia(31%) saturate(763%) hue-rotate(97deg) brightness(91%) contrast(92%)!important;
background: #33996655!important;
}'
);
style.appendChild(styleContent );
var caput = document.getElementsByTagName('head'); caput[0].appendChild(style);
})();">
<strong>Advanced Target Size Highlighter</strong></a></p>
<p><strong>Note:</strong> this 'advanced' version can affect some elements more negatively, including some layout shift for certain elements. For example, pseudo-elements that are outside or larfer than their main element's area will be shifted back inside of the area of the main element. I think this is a browser bug, as I don't believe adding a filter attribute should lead to layout shift.</p>
<h2>Bonus 24-pixel reference images</h2>
<p>If you want to get an idea for how big 24 pixels is on an actual device's screen, you can load up this page, make sure the browser and screen zooms are set to 100%, and then measure the images below. There's a circle version to match the requirements for WCAG 2.2 success criterion 'Target Size', and a rectangular version to make it easier to measure with a ruler.</p>
<p><a href="assets/images/24px-circle.png">Circle reference image <img alt="" src="assets/images/24px-circle.png"</img></a></p>
<p><a href="assets/images/24px-rectangle.png">Rectangle reference image <img alt="" src="assets/images/24px-rectangle.png"</img></a></p>
<h2>How to contribute and contact information</h2>
<p>This project is maintained and hosted using GitHub. Feel free to open an issue, suggest some edits or fork the repository entirely through the <a href="https://github.com/accessibility-tools/target-size-highlighter">target-size-highlighter GitHub repository</a>.</p>
<p>If you would like to chat about a particular but unrelated web accessibility topic, you can <a href="https://www.linkedin.com/in/dav-idcox">reach out to dav-idcox on LinkedIn</a>.</p>
</main>
</body>
</html>