kayle

kayle

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.

Runners

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 using injectRunner util.

Playwright/Puppeteer

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.

Linting

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");

WASM

Extract all links from a web page fast:

import { extractLinks } from "kayle/wasm";

const links = await extractLinks({ page, browser }, "https://www.drake.com");

Testing

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

LICENSE

check the license file in the root of the project.