A high performance web accessibility engine used at A11yWatch.
# install a browser automation lib first
# npm install @playwright/core
# or
# npm install puppeteer
npm i kayle --save
Requires node ^13
import { kayle } from "kayle";
// browser code not shown. get a normal browser handle from puppeteer or playwright.
const page = await browser.newPage();
const results = await kayle({ page, browser, origin: "https://mywebsite.com" });
kayle contains details about the page and accessibility issues:
// sample of results for an audit.
const results = {
documentTitle:
"Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels",
pageUrl: "https://drake.com",
issues: [
{
context: '<a class="expandMenu"><i></i><i></i><i></i></a>',
selector: "#hs_cos_wrapper_module_14725592865174 > a",
code: "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.EmptyNoId",
type: "error",
typeCode: 1,
message:
"Anchor element found with no link content and no name and/or ID attribute.",
runner: "htmlcs",
runnerExtras: null,
recurrence: 5, // issue found 5 times against the page
},
{
context:
'<a href="https://www.drake.com/labels?hsLang=en">Learn more</a>',
selector:
"#hs_cos_wrapper_module_1569856007055222 > div > div:nth-child(3) > a",
code: "color-contrast",
type: "error",
typeCode: 1,
message: "Elements must have sufficient color contrast",
recurrence: 0,
runner: "axe",
runnerExtras: {
description:
"Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
impact: "serious",
helpUrl:
"https://dequeuniversity.com/rules/axe/4.6/color-contrast?application=axeAPI",
},
},
/// ...more issues
],
meta: {
errorCount: 11,
warningCount: 15,
noticeCount: 0,
accessScore: 78,
possibleIssuesFixedByCdn: 0,
},
automateable: { missingAltIndexs: [5, 22] },
clip: {
x: 20,
y: 100,
width: 300,
height: 200,
},
clipBase64: "iVBORw0KGgoAAAANSUhEUgAAAJYAAABxCAYAAAA3QFrYAAAAA", // use in img element like data:image/png;base64, + clipBase64
};
Checkout the playwright-example or puppeteer for more info.
kayle supports multiple test runners which return different results. The built-in test runners are:
-
axe
: run tests using axe-core. -
htmlcs
(default): run tests using HTML CodeSniffer -
kayle
(experimental): run tests using with Rust Kayle_Innate or accessibility-rs. -
custom
: custom runners usinginjectRunner
util.
fast_htmlcs
: expect runs to finish between 8-40ms with static html and around 30-90ms without.
fast_axecore
: expect runs to finish between 40-350ms with static html and around 30-90ms without.
We are working on making fast_axecore fast so it can run relatively near htmlcs. If you are using puppeteer expect around 2x slower results.
Straight forward linting. You can pass a url or valid html.
Linting is handled on the same machine not sandboxed. You can also use the kayleInnateBuilder
to
get the wasm kayle setup to lint pages.
import { kayleLint } from "kayle/lint";
await kayleLint("https://a11ywatch.com");
Extract all links from a web page fast:
import { extractLinks } from "kayle/wasm";
const links = await extractLinks({ page, browser }, "https://www.drake.com");
In order to run full e2e test first run npm install puppeteer
or npm install @playwright/test
to install chromium locally.
Run the command to compile test and run.
npm run test
check the license file in the root of the project.