Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
accessibility-checker-engine
Advanced tools
An automated accessibility checking engine for use by other tools
accessibility-checker-engine
is a rules-based engine for detecting issues in the Document Object Model (DOM) of web applications and content.
Install accessibility-checker-engine in a Node environment to inject into a browser environment:
$ npm install --save-dev accessibility-checker-engine
Use a CDN to access the engine in a browser environment:
<script src="https://unpkg.com/accessibility-checker-engine@latest/ace.js"></script>
See CodeSandbox Demo for a more complete example.
const checker = new ace.Checker();
const report = await checker.check(document, ["IBM_Accessibility"]);
The most important entry point API is the check
method of ace.Checker
object. You can use a callback or Promise mechanism to retrieve the accessibility results for further processing in your javascript or NodeJS program.
const checker = new ace.Checker();
checker.check(doc, ["IBM_Accessibility"])
.then(function(report) {
// process accessibility report here
});
doc
- can be one of:
DOM
) object representing an HTML document which is usually available in a browser environment as document
DOM
element representing a fragment HTML which can be retrieved from a DOM
by matching against one or more selectors.["IBM_Accessibility"]
- apply IBM accessibility ruleset.report
- accessibility results contains identified accessibility issues and their descriptions from the given doc
, and a summary of the issues. The report is in JSON format (see details).IBM Accessibility v7.2
, WCAG 2.2 (A & AA)
, WCAG 2.1 (A & AA)
, and WCAG 2.0 (A & AA)
and mappings of the rules to the standards (Requirements), Rule IDs, the individual failure messages, and links to the Help files are published at Checker rule sets.The accessibility report is in JSON format, and contains information about the identified accessibility issues and their descriptions.
{
report: {
scanID: "18504e0c-fcaa-4a78-a07c-4f96e433f3e7",
toolID: "@ibma/aat-v2.0.6",
// Label passed to getCompliance
label: "MyTestLabel",
// Number of rules executed
numExecuted: 137,
nls: {
// Mapping of result.ruleId, result.reasonId to get a tokenized string for the result. Message args are result.messageArgs
"WCAG20_Html_HasLang": {
"Pass_0": "Page language detected as {0}"
},
// ...
},
summary: {
URL: "https://www.ibm.com/en-US/",
counts: {
violation: 1,
potentialviolation: 0,
recommendation: 0,
potentialrecommendation: 0,
manual: 0,
pass: 136,
ignored: 0
},
scanTime: 29,
ruleArchive: "September 2019 Deployment (2019SeptDeploy)",
policies: [
"IBM_Accessibility"
],
reportLevels: [
"violation",
"potentialviolation",
"recommendation",
"potentialrecommendation",
"manual"
],
startScan: 1470103006149
},
results: [
{
// Which rule triggered?
"ruleId": "WCAG20_Html_HasLang",
// In what way did the rule trigger?
"reasonId": "Pass_0",
"value": [
// Is this rule based on a VIOLATION, RECOMMENDATION or INFORMATION
"VIOLATION",
// PASS, FAIL, POTENTIAL, or MANUAL
"PASS"
],
"path": {
// xpath
"dom": "/html[1]",
// path of ARIA roles
"aria": "/document[1]"
},
"ruleTime": 0,
// Generated message
"message": "Page language detected as en",
// Arguments to the message
"messageArgs": [
"en"
],
"apiArgs": [],
// Bounding box of the element
"bounds": {
"left": 0,
"top": 0,
"height": 143,
"width": 800
},
// HTML snippet of the element
"snippet": "<html lang=\"en\">",
// What category is this rule?
"category": "Accessibility",
// Was this issue ignored due to a baseline?
"ignored": false,
// Summary of the value: violation, potentialviolation, recommendation, potentialrecommendation, manual, pass
"level": "pass"
},
// ...
]
}
}
This section provides 'AS-IS' code examples, snippets, or logic. The users are expected to make changes according to their environments.
You can use the wrapper method checkDemo
in ace
object, which is specifically created for checking accessibility in a browser developer tool. The checkDemo
method outputs both raw accessibility results in JSON format, and the results sorted by elements identified by their xPath. Following are the example steps to use ace.checkDemo()
to display the results in a Chrome developer tool:
Customize and Control Google Chrome
button, select More Tools
, then select Developer Tool
Console
tab to show command promptace.js
select and copy all the contentEnter
ace.checkDemo()
, then Enter
You can view the accessibility report for the page:
The following code snippet demonstrates how to use ACE to test a web page for accessibility in an embedded Chrome environment (puppeteer
). See accessibility-checker for a more complete tool for this environment.
(async () => {
const chromeLauncher = require('chrome-launcher');
const axios = require('axios');
const puppeteer = require('puppeteer');
// Initialize a Chrome instance
const chrome = await chromeLauncher.launch({
//chromeFlags: ['--headless'],
logLevel: 'info',
output: 'json'
});
const response = await axios.get(`http://localhost:${chrome.port}/json/version`);
const { webSocketDebuggerUrl } = response.data;
// Connect puppeteer to the chrome instance using the endpoint
const browser = await puppeteer.connect({ browserWSEndpoint: webSocketDebuggerUrl });
//get the page
const [page] = await browser.pages();
// inject the ace.js into the page when domcontentloaded event is fired, assuming the ace.js is in the same folder
await page.goto('http://localhost:3000', { waitUtil: 'domcontentloaded' };
await page.addScriptTag({ path: path.join(__dirname, 'ace.js') });
//invoke the ace to evaluate the page for accessibility
await page.evaluate(() => {
const checker = new ace.Checker();
checker.check(document, ["IBM_Accessibility"])
.then(function (report) {
for (let idx = 0; idx < report.results.length; ++idx) {
//process the report
}
});
});
})();
You can use the accessibility-checker-extension for Chrome, Edge, or Firefox. The browser extensions integrate the accessibility web engine (ace.js) and formatted results into the browser developer tool to view the accessibility issues and the locations of violating components. For more information and instructions, please view accessibility-checker-extensions.
You can use the karma-accessibility-checker to integrate accessibility web engine into Karma or Selenium test framework. For more information and instructions, please view karma-accessibility-checker.
If you think you've found a bug, have questions or suggestions, please report the bug in GitHub Issues.
This software includes material copied from or derived from the open ACT-Rules Community. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
FAQs
An automated accessibility checking engine for use by other tools
The npm package accessibility-checker-engine receives a total of 8,304 weekly downloads. As such, accessibility-checker-engine popularity was classified as popular.
We found that accessibility-checker-engine demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.