63 строки
2.1 KiB
HTML
63 строки
2.1 KiB
HTML
<!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>
|