accessibilityjs/example.html

61 строка
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">
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']
}
})
</script>
</body>
</html>