Accented

A frontend library for continuous accessibility testing and issue highlighting.

What is Accented?

Accented is a visual library based on axe-core that helps identify issues as soon as they are introduced.

It adds interactive visual callouts for all accessibility issues that axe-core identifies.

Example — without Accented vs. with Accented:

Try it out at the Playground (StackBlitz).

Accented can complement other tools commonly used for accessibility testing:

• It can find more issues than source code linting. The popular eslint-plugin-jsx-a11y is great, and linters validate the whole codebase, but some issues can only be detected on the rendered page. For example, the linter cannot find issues with color contrast or heading order. Besides, Accented is not framework-specific.
• It’s embedded into the project code, with no setup required in the browser or code editor. You’d get a similar audit from Lighthouse or axe DevTools, but with Accented, you don’t need a browser extension, and the results are always up to date.
• You don’t need to write any extra code, unlike with adding accessibility tests to a test suite. You can test for accessibility issues in your test suite, for example using @axe-core/playwright. For that, however, you need to write a test case for every state of the application that you want to test. Accented instead automatically tests anything that’s currently on the page in your browser.

Learn more about Accented at accented.dev.

Installation and usage

Install:

npm install --save-dev accented

Import and run at any moment during your app’s initialization:

if (isDevelopment) {
  const { accented } = await import("accented");
  accented();
}

⚠️ Heads up! Don’t expose Accented to your users. It’s for development use only.

See the docs for your bundler or framework for how to run code only in the development environment.

• More detailed installation and usage guide
• Full API

More info

• Accessibility (how accessible is Accented itself?)
• Performance (does Accented affect runtime performance of my app?)
• Browser support (will Accented work for me and my teammates?)
• Versioning policy (Accented follows SemVer)
• Changelog

Contributing

Contributions are welcome!

• See CONTRIBUTING.md for setup instructions and guidelines.
• Open an issue or pull request if you spot a bug or want to propose a new feature.
• See Milestones to learn about our plans for Accented.

Have feedback or ideas? Contact Pavel at [e-mail].