qunitjs
HTML Report should meet WCAG compliance
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 https://github.com/qunitjs/qunit/issues/1427#issuecomment-683370797
(Merged from https://github.com/qunitjs/qunit/issues/1469)
When scanning the default example at https://qunitjs.com/resources/example-index.html with the AXE tool in Firefox, there are a couple of issues detected currently. (Thanks to @zachleat for including these in Speedlify. We looked at similar tools in the past, but it's been years, and a ton of low-hanging fruit has crept in.)
- QUnit 2.10.1
- axe v4.5.3 (axe-core 3.5.5)
Most of these seem easy to fix:
- [ ] 1) "Headings must not be empty",
<h2 id="qunit-banner" class="qunit-pass"></h2> - Not sure why this is a heading. I think a presentational
<div>might be more appropiate. (Never thought I'd say that!) - [x] 2) "Document must have one main landmark",
<html> - We're fairly constrained here, but as a quick fix we could add
role="main"to<div id=qunit>at the same time as when we insert the UI. - [x] 3) "All page content must be contained by landmarks" (9+ warnings)
- This will mostly be obsoleted by point 2. Although we should add
role="navigation"and/or or<nav>for qunit-toolbar. - [x] 4) "Elements must have sufficient color contrast",
<a …>Rerun</a> - This is pretty much invisible to everyone as far as I'm concerned. Needs to be much darker indeed.
- [x] 5) "Elements must have sufficient color contrast",
<span class=runtime>3 ms</span> - Instead of the light blue tint it has today we can re-use the darker blue we already use for text elsewhere. There isn't really any semantic meaning being conveyed by this slightly brighter blue text so this would also reduce the overall color palette by one color.
- [x] 6) "Elements must have sufficient color contrast",
#qunit-testresult-display - Same as point 5. Use the darker blue instead, perhaps the one we use for
.test-name. - [x] 7) "Elements must have sufficient color contrast",
.module-name - Same as point 5. Use the darker blue instead, perhaps the one we use for
.test-name. Here, the color distinction does currently convey meaning - to distinguish between module and test name. We could do that with bold/regular instead. - ~8) "
<html>element must have a lang attribute"~- This is a tricky one. We could add
lang="en" dir="ltr", which would be true for the test UI, but not per se about the content. Maybe leaving this undefined is best. Or perhaps we can set it on a subset of the UI where no user input is involved. Or perhaps it's worth to make it configurable, e.g.QUnit.config.userLangwhich we'd apply to all user-generated content?
- This is a tricky one. We could add
All points but one have been resolved and will be released shortly. The remaining point (H2 -> DIV, for the empty pixel banner) will be done in QUnit 3.