Open Source JavaScript Accessibility Tools

Lighthouse is an open-source, automated tool that analyzes and audits web apps and web pages in order to improve their quality. Lighthouse collects modern performance metrics and insights on developer best practices; auditing for performance, accessibility, SEO and more. After auditing it produces a report either in JSON or HTML. Included in the report is a reference doc that explains the importance of the audit and how to fix the problem areas, which you can use to improve the web app or web page. Lighthouse can be integrated directly into the Chrome DevTools with its own panel. To run it, you would simply have to select the Lighthouse panel and click on "Generate report". It can also be run from the command line, or as a Node module.

Streamline the way you develop apps. Build responsive and accessible mobile-first projects for the web with an easy-to-use component library. part design system, part framework, and all awesome. grommet is a React-based framework that provides accessibility, modularity, responsiveness, and themes in a tidy package. Tailor composite components with grommet. embrace atomic design methods and build a library that fits your needs. Keyboard navigation, screen reader tags, and more. grommet provides support for W3c’s WCAG 2.1 spec out of the box. Tailor the component library to align with your Color, Type, and Layout needs. you can even control component interaction. Support all the devices! Use Flexbox and CSS Grid to provide layouts for all those new phones and widescreen displays. Already working on a project, starting fresh, or just want to poke around and see how all this junk works?

Static AST checker for accessibility rules on JSX elements. This plugin does a static evaluation of the JSX to spot accessibility issues in React apps. Because it only catches errors in static code, use it in combination with axe-core/react to test the accessibility of the rendered DOM. Consider these tools just as one step of a larger a11y testing process and always test your apps with assistive technology. If you installed ESLint globally (using the -g flag in npm, or the global prefix in yarn) then you must also install eslint-plugin-jsx-a11y globally. To enable your custom components to be checked as DOM elements, you can set global settings in your configuration file by mapping each custom component name to a DOM element type. Enforce all elements that require alternative text have meaningful information to relay back to the end user.

Easily create, save, and run tests intuitively using Spearmint. Access your app's file directory and codebase while providing a fully functional in-app terminal and browser. When you're ready to continue developing your application, your Jest test files will be in your app's __tests__ folder. Writing tests is like eating your veggies: it's something everyone knows that they should do, but not everyone does. Spearmint provides a simple way to write tests that gives you confidence your application will work in the way your users interact with it. Spearmint provides a user-friendly GUI for developers to easily generate tests with a few clicks of a button. It dynamically converts user inputs into executable test code through react-testing-library, jest, supertest, puppeteer, vue-test-utils, solid-testing-library, and axe-core. Spearmint isn't just for React. Write tests for your Redux actions, async functions, reducers, or middleware.

Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing. Axe-core has different types of rules, for WCAG 2.0 and 2.1 on level A and AA, as well as a number of best practices that help you identify common accessibility practices like ensuring every page has an h1 heading, and to help you avoid "gotchas" in ARIA like where an ARIA attribute you used will get ignored. With axe-core, you can find on average 57% of WCAG issues automatically. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.

## Accessibility Widget - v0.3 It is a simple accessibility add-on for browser Firefox without dependencies that allows users with disabilities easy and convenient way to browse most websites ### Supported Languages English by default, Hebrew and Russian. These languages ​​are auto-detected by the browser ### Future implementations - Option page to set position of widget and I hope many other interesting components...

AChecker is a second generation evaluation tool used to assess the accessibility of Web content to people with disabilities, using a variety of international standards.

Personal blog's Jekyll template that has been optimizing for performance, accessibility, usability, readability and simplicity in general. This is an attempt at creating something that would be comfortable to use on your website.

Opena11y is add-on for browser Firefox, is based on Tota11y js library for doing some easy fixes to make your webpages more accessible. Release 0.9.6 - 20/08/2020 - Updated all tota11y library definitions

VaMoLa Monitor is a tool to monitorize sites accessibility

VaMoLa Validator is a tool to validate accessibility according to Italian Law - based on AChecker

WhakerKit is a versatile toolkit for building websites with both static and dynamic HTML pages, developed by Brigitte Bigi, CNRS. WhakerKit offers seamless management of public and authenticated access, and simplifies document sharing for collaborative environments. It is based on the following technologies: * python >= 3.9 * (optional) PyJWT and ldap3 for authentication (install with pip) * WhakerPy >= 1.3: <https://whakerpy.sourceforge.io> (install with pip) * Whakerexa >= 0.7: <https://whakerexa.sourceforge.io> (download package and unzip) * HTML-5, CSS-4 and JS technologies

tota11y helps visualize how your site performs with assistive technologies. The process of testing for accessibility (a11y) is often tedious and confusing. In many cases, developers must have some prior accessibility knowledge in order to make sense of the results. Instead, tota11y aims to reduce this barrier of entry by helping visualize accessibility violations (and successes), while educating on best practices. tota11y is a single JavaScript file that inserts a small button in the bottom corner of your document. The toolbar consists of several plugins that each provide their own functionality. Many of these plugins "annotate" elements on the page. Sometimes to show their existence, other times to point out when something's wrong. tota11y makes it easy to spot some of the most common accessibility violations made by page authors today.