Accessibility Audit Results
1892:
1893:
1894:
1895:
1896:
1897:
`;
1898:
1899: if (issues.length) {
1900: const errors = issues.filter(i => i.type === 'error');
1901: const warns = issues.filter(i => i.type === 'warning');
1902: if (errors.length) {
1903: html2 += `
Errors — Must Fix (${errors.length})
`;
1904: errors.forEach(i => { html2 += `
${a11yEsc(i.label)}
${a11yEsc(i.desc)}
${i.fix?`
Fix: ${a11yEsc(i.fix)}
`:''}
`; });
1905: html2 += '
';
1906: }
1907: if (warns.length) {
1908: html2 += `
Warnings (${warns.length})
`;
1909: warns.forEach(i => { html2 += `
${a11yEsc(i.label)}
${a11yEsc(i.desc)}
${i.fix?`
Fix: ${a11yEsc(i.fix)}
`:''}
`; });
1910: html2 += '
';
1911: }
--- Lines 2167-2203 ---
2167: sync();
2168: });
2169: })();
2170:
2171:
2172: // Page wiring (replaces the inline onclick/onblur handlers the tool had on performance-tools.html).
2173: (function () {
2174: function on(sel, ev, fn) { document.querySelectorAll(sel).forEach(function (el) { el.addEventListener(ev, fn); }); }
2175: function wire() {
2176: on('[data-tabgroup]', 'click', function () { switchTabGroup(this, this.getAttribute('data-tabgroup')); });
2177: on('#a11y-url', 'blur', function () { window.a11yCheckUrl(); });
2178: on('#a11y-run-btn', 'click', function () { a11yQueueRun(function () { return SEOGate.check('accessibility', function () { return fetchAndCheckA11y(); }, true); }); });
2179: on('#a11y-paste-btn', 'click', function () { SEOGate.check('accessibility', function () { window.a11yBuiltByScripts = false; window.a11yKeyboard = null; window.a11yKeyboardP = null; checkA11y(); }, true); });
2180: on('#a11y-sample-btn', 'click', function () { loadA11ySample(); });
2181: on('#seo-gate-close', 'click', function () { SEOGate.close(); });
2182: }
2183: if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire); else wire();
2184: })();
2185:
2186:
2187: (function () {
2188: var FIELDS = [
2189: ['a11y-url', function () { a11yCheckUrl(); }]
2190: ];
2191: // Only call the endpoint once the value could plausibly be a URL, so typing
2192: // does not fire a request per keystroke.
2193: function plausible(v) {
2194: v = (v || '').trim();
2195: return v.length > 6 && v.indexOf('.') > 0 && !/\s/.test(v);
2196: }
2197: function wire(id, fn) {
2198: var el = document.getElementById(id);
2199: if (!el) return;
2200: var timer = null, lastChecked = '';
2201: function run() {
2202: var v = el.value.trim();
2203: if (!plausible(v) || v === lastChecked) return;
=== RENDERED REPORT HANDOFF ===
// html: the page as the full audit fetched it; url: its address (for relative links);
// fetchCss(url, referer) -> Promise<{ ok, html, status }>: the app's guarded fetch.
// One page's report: the Accessibility page tool run in headless Chrome on the page's copy. inner (optional) holds the
// inner pages already checked, which the tool adds to this report (see a11yInner in the tool page).
async function toolReport(html, url, builtByScripts, keyboard, fetchCss, inner) {
await acquire();
let page = null, timer = null;
try {
const browser = await getBrowser();
page = await browser.newPage();
await page.setViewport({ width: 1280, height: 900 });
await page.setRequestInterception(true);
page.on('request', req => {
const u = req.url();
if (u.startsWith(AXE_URL)) {
const f = AXE_FILES[u.slice(AXE_URL.length).split(/[?#]/)[0]];
if (!f) return req.abort().catch(() => {});
return fs.promises.readFile(f).then(body => req.respond({ status: 200, contentType: 'application/javascript', body })).catch(() => req.abort().catch(() => {}));
}
if (/^(file|data|about|blob):/i.test(u)) {
// the only file Chrome may open is the tool page itself
if (/^file:/i.test(u) && u.split('#')[0].split('?')[0] !== TOOL) return req.abort().catch(() => {});
return req.continue().catch(() => {});
}
let host;
try { const p = new URL(u); if (!/^https?:$/.test(p.protocol)) return req.abort().catch(() => {}); host = p.hostname; } catch (e) { return req.abort().catch(() => {}); }
if (BLOCK_HOSTS.test(host)) return req.abort().catch(() => {});
publicHost(host).then(ok => (ok ? req.continue() : req.abort())).catch(() => req.abort().catch(() => {}));
});
await page.exposeFunction('__a11yFetch', async (u, ref) => {
try {
const p = new URL(u);
if (!/^https?:$/.test(p.protocol) || !(await publicHost(p.hostname))) return { ok: false, html: '', error: 'blocked' };
return await fetchCss(u, ref || null);
} catch (e) { return { ok: false, html: '', error: String(e && e.message || e) }; }
});
await page.goto(TOOL, { waitUntil: 'domcontentloaded', timeout: 20000 });
await page.addStyleTag({ path: TOOL_CSS }).catch(() => {});
await page.addScriptTag({ path: TOOL_JS });
// axe-core and its runner, from this server's own copy, for the tool page's extra WCAG checks (see a11yAxe).
let axeSrc = null;
try { axeSrc = { axe: await fs.promises.readFile(AXE_FILES['axe.min.js'], 'utf8'), run: await fs.promises.readFile(AXE_FILES['run.js'], 'utf8') }; } catch (e) { axeSrc = null; }
const run = page.evaluate(async (h, base, byScripts, axeSrc, kb, inner) => {
if (axeSrc) window.__a11yAxeSrc = axeSrc;
window.a11yKeyboard = kb || null; window.a11yKeyboardP = null; window.a11yInner = inner || null; window.a11yInnerFixed = true;
window.fetchRawHtml = (u, r) => window.__a11yFetch(u, r || null);
window.a11yBuiltByScripts = byScripts;
window.a11yLastReport = null;
document.getElementById('a11y-input').value = h;
checkA11y(base);
const until = Date.now() + 58000;
while (!window.a11yLastReport && Date.now() < until) await new Promise(r => setTimeout(r, 100));
return window.a11yLastReport;
}, html, url || '', builtByScripts, axeSrc, keyboard, inner || null);
const report = await Promise.race([run, new Promise((_, rej) => { timer = setTimeout(() => rej(new Error('rendered accessibility check timed out')), TIMEOUT_MS); })]);
if (!report || !Array.isArray(report.issues)) throw new Error('rendered accessibility check returned no report');
report.rendered = true;
return report;
} finally {
if (timer) clearTimeout(timer);
if (page) await page.close().catch(() => {});
release();
}
}
// The two inner pages, each loaded as visitors see it and given the full report on its own. A page that cannot be
// loaded that way (error status, bot-check, almost empty, a different site after redirects) is left out.
// onProgress (optional) is called while they run, so a caller streaming results can show the audit is still working.
async function innerReports(homeUrl, urls, fetchCss, onProgress) {
const pages = [];
=== VALIDATOR EXPORTS ===
'use strict';
const RULES = {
'9e45ec': { property: 'word-spacing', threshold: 0.16 },
'24afc2': { property: 'letter-spacing', threshold: 0.12 }
};
function validateTextSpacing(ruleId) {
const rule = RULES[ruleId];
if (!rule) throw new Error('Unsupported ACT rule: ' + ruleId);
// ACT applicability is restricted to HTML documents.
if (document.documentElement.namespaceURI !==
'http://www.w3.org/1999/xhtml') {
return { outcome: 'inapplicable', findings: [] };
}
const findings = [];
let applicable = false;
const walker = document.createTreeWalker(
document.body || document.documentElement,
NodeFilter.SHOW_TEXT
);
while (walker.nextNode()) {
const node = walker.currentNode;
if (!node.textContent || !node.textContent.trim()) continue;
const element = node.parentElement;
}
if (!relevant) continue;
applicable = true;
const fontSize = parseFloat(style.fontSize) || 16;
const actualSpacing = parseFloat(
style.getPropertyValue(rule.property)
) || 0;
const minimum = fontSize * rule.threshold;
if (actualSpacing < minimum - 0.01) {
findings.push({
ruleId,
property: rule.property,
selector: element.tagName.toLowerCase(),
actualPx: actualSpacing,
minimumPx: minimum,
message: rule.property +
' is restricted below the required ACT threshold'
});
}
}
return {
outcome: findings.length
? 'failed'
: applicable ? 'passed' : 'inapplicable',
findings
};
}
module.exports = { validateTextSpacing };
=== VALIDATOR OUTPUT EXAMPLE ===
9e45ec {
"ruleId": "9e45ec",
"title": "Failed Example 1",
"url": "https://www.w3.org/WAI/content-assets/wcag-act-rules/testcases/9e45ec/31d185e51a8be241f8a75d09deae69d3937f0329.html",
"expected": "failed",
"actual": "failed",
"findings": [
{
"ruleId": "9e45ec",
"property": "word-spacing",
"selector": "p",
"actualPx": 1.6,
"minimumPx": 2.56,
"message": "word-spacing is restricted below the required ACT threshold"
}
],
"status": "matched"
}
24afc2 {
"ruleId": "24afc2",
"title": "Failed Example 1",
"url": "https://www.w3.org/WAI/content-assets/wcag-act-rules/testcases/24afc2/8383685465c6a417cb86e192d1e9157bd5feee99.html",
"expected": "failed",
"actual": "failed",
"findings": [
{
"ruleId": "24afc2",
"property": "letter-spacing",
"selector": "p",
"actualPx": 1.6,
"minimumPx": 1.92,
"message": "letter-spacing is restricted below the required ACT threshold"
}
],
"status": "matched"
}
Production files changed: NO