Show HN: A browser-based accessibility checker that integrates into web projects

3 months ago 24

A frontend library for continuous accessibility testing and issue highlighting.

Add a few lines of code to your web app, and you’ll see interactive callouts appear next to elements with accessibility issues.

An example of an application without Accented / with Accented:

Screenshot of a web application without Accented.Screenshot of the same application with Accented highlighting accessibility issues.

Features

  • Based on axe-core, the world’s most popular accessibility testing engine.
  • Instant and continuous feedback: it highlights issues in the current state of the page you’re working on.
  • Initialized with just a few lines of code. Everything lives in your project’s repo — no setup required in the browser or code editor.
  • Nicely complements other approaches to accessibility testing, such as linting or using axe-core in your test suite.
  • Framework-agnostic: it doesn’t matter what framework you use (React, Vue, Svelte, you name it) — or if you use one at all. As long as HTML ends up in the browser, Accented can help. It works equally well with server-rendered and client-rendered content.
  • Works on pages old and new. Whether you’re using the latest HTML and CSS features or maintaining a legacy codebase, Accented can help you find accessibility issues.
  • Free and open-source (MIT license).
Read Entire Article