Skip to content

Instantly share code, notes, and snippets.

@dylanb
dylanb / axe-report.js
Created December 9, 2018 17:12
CLI output for axe-core violations
const colors = require('colors');
const link = colors.underline.blue;
const error = colors.red.bold;
function selectorToString(selectors, separator) {
separator = separator || ' '
return selectors
.reduce((prev, curr) => prev.concat(curr), [])
.join(separator)
}
results.violations.map(function (rule) {
return {
id: rule.id,
count: rule.nodes.length
}
})
Rule ID Description Tags
accesskeys Ensures every accesskey attribute value is unique wcag2a, wcag211
area-alt Ensures <area> elements of image maps have an alternate text wcag2a, wcag111, section508, section508a
aria-allowed-attr Ensures all attributes that start with 'aria-' are valid for an element's role wcag2a, wcag411
aria-required-attr Ensures all elements that contain WAI-ARIA roles to ensure that all required ARIA attributes are present wcag2a, wcag411
aria-required-children Checks all elements that contain a WAI-ARIA role to ensure that all required children roles are present wcag2a, wcag411
[ari
@dylanb
dylanb / handlebars_templates.html
Last active June 29, 2020 22:35
How to turn axe-core violations into human readable HTML (uses Handlebars)
<script id="rowTemplate" type="text/x-handlebars-template">
<tr>
<th scope="row" class="help">
<a href="javascript:;" class="rule" data-index="{{index}}">
{{{help}}}
</a>
</th>
<td scope="row">
<a target="_blank" href="{{helpUrl}}">?</a>
</td>
@dylanb
dylanb / gist:88771962564e5a87ee2c
Last active August 29, 2015 14:19
Incorrect and correct way to label a group of inputs using ARIA
<!doctype html>
<html>
<head>
<title>Testing Group Labels</title>
</head>
<body>
<a href="#">before</a>
<h2>Wrong Way</h2>
<div role="group" aria-labelledby="selectAdministratorHeader" id="selectAdministrator">
<div>