Open Source JavaScript Accessibility Tools

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.

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?

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

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

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.

VaMoLa Monitor is a tool to monitorize sites accessibility

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.