HTML Report should meet WCAG compliance #1427
Description
We'd like to use a tool like Axe to help lockdown WCAG rules for accessibility, but the QUnit page itself has some violations that we are forced to filter out. Ideally, yes, tests would only attempt to lockdown their particular widget/section, likely placed in the qunit-fixture, but this shouldn't be a limitation.
Aside from our specific intent, meeting these guidelines can independently benefit testing workflows with increased industry-standard accessibility.
Code that reproduces the problem:
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.9.3.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<script src="https://code.jquery.com/qunit/qunit-2.9.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/3.4.1/axe.min.js"></script>
<script type="text/javascript">
QUnit.test('Hello World', async assert => {
await axe.run(document.body, (err, results) => {
assert.equal(results.violations.length, 0);
results.violations.forEach(v => {
assert.notOk(v);
})
})
})
</script>
</body>
</html>What did you expect to happen?
No violations to be found
What actually happened?
This currently finds 3 violations, failing the following rules:
- color-contrast (impact: serious)
- empty-heading (impact: minor)
- link-name (impact: serious)
Checklist
See #1427 (comment)