This repository has been archived by the owner on Oct 21, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 72
/
example.html
62 lines (59 loc) · 2.12 KB
/
example.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
<!doctype>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
// Polyfill matches & closest for IE11
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this
var ancestor = this
if (!document.documentElement.contains(el)) return null
while (ancestor !== null) {
if (ancestor.matches(s)) return ancestor
ancestor = ancestor.parentElement
}
return null
}
}
</script>
<script src="dist/index-umd.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper js-pjax-container">
<div id="selectors-stop-here">
<p>Label without control</p>
<label>Label</label>
<p>Input without label</p>
<input type="text">
<p>Input without label with ID</p>
<input type="text" id="path-ends-here">
</div>
<p>Button without text</p>
<button type="button" class="abc js-menu-target" id="bbbb" aria-haspopup="true"><svg height="20" width="20"><circle cx="10" cy="10" r="10" fill="#000000"></circle></svg></button>
<p>Button should have aria-haspopup</p>
<button type="button" class="abc js-menu-target" id="bbbb">Menu target</button>
<p>Link without href</p>
<a>Link</a>
<p>Image without alt</p>
<img src="https://github.com/octocat.png" width="50" height="50">
</div>
<script type="text/javascript">
var errors = accessibilityjs.scanForProblems(document.body, function (error) {
error.element.style.outline = '5px solid red'
error.element.addEventListener('click', function () {
alert([error.name, error.message].join('\n'))
})
}, {
ariaPairs: {
'.js-menu-target': ['aria-haspopup']
}
})
console.log(errors)
</script>
</body>
</html>