eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.

•    Javascript

---

Static AST checker for accessibility rules on JSX elements. Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.

eslint aria a11y accessibility jsx react eslintplugin eslint-plugin

bootstrap-vue - BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue

•    Javascript

---

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup. Support this project by becoming a sponsor.

bootstrap components vue accessibility icons a11y nuxt accessible wai-aria component-library nuxtjs bootstrapvue bootstrap-v4 bootstrap-for-vue vue.js vue-v2 ssr web directives bootstrap-icons aria popper.js css scss alert avatar badge breadcrumb button calendar card carousel checkbox collapse date-picker datepicker dropdown dropzone form input jumbotron list modal nav navbar option overlay pagination popover progress radio select sidebar skeleton slider spinner tab table tag tags time-picker timepicker toast tooltip

axe-core - Accessibility engine for automated Web UI testing

•    Javascript

---

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. Sign up for axe news to get the latest on axe features, future releases, and events.

accessibility a11y testing unit tdd bdd axe

TheA11yMachine - The A11y Machine is an automated accessibility testing tool which crawls and tests pages of any web application to produce detailed reports

•    Javascript

---

Accessibility is not only a concern for disabled people. Bots can be considered as such, like DuckDuckGo, Google or Bing. By respecting these standards, you're likely to have a better ranking. Also it helps to clean your code. Accessibility issues are often left unaddressed for budget reasons. In fact most of the cost is spent looking for errors on your website. The A11y Machine greatly help with this task, you can thus focus on fixing your code and reap the benefits. If you would like to validate your pages against the HTML5 recommendation, then you need to install Java.

test accessibility wcag crawl

a11y - Accessibility audit tooling for the web (beta)

•    Javascript

---

PhantomJS, which is used for generating the screenshots, is installed automagically, but in some rare cases it might fail to and you'll get an Error: spawn EACCES error. Download PhantomJS manually and reinstall a11y if that happens.

cli-app cli a11y audit test accessibility wai aria dev developer tool report web website

a11y-toggle - A tiny script for accessible content toggles.

•    HTML

---

A tiny script (less than 0.6Kb gzipped) to build accessible content toggles. You can try the live demo which also acts as a documentation. a11y-toggle uses relatively modern JavaScript API (namely reduce, addEventListener, etc.) therefore will not work in Internet Explorer 8 and below. All the other browsers, including mobile ones should work fine.

toggle control accessibility a11y

react-axe - Accessibility auditing for React.js applications

•    Javascript

---

Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

accessibility a11y lint test

a11y-tools - JS Accessibility Tool List

•    

---

My purpose in making such a list is that I want to be aware of what things are being evaluated so that I can get an idea of what things aren't being evaluated. Accessibility is hard, and since many commercial sites don't produce high quality HTML accessibility is much harder than it should be. Making accessibility easier to implement and understand is absolutely important. Good tools help with this. Sometimes the biggest problem with accessibility is that we know what to check for (most of the time), but we don't always know what grading aspects we are missing. Examples include color contrast problems over gradient backgrounds and improper use of the title attribute. Sometimes we also don't realize how the dynamic interactions we introduce with JavaScript alienate segments of our audience.

react-a11y - Identifies accessibility issues in your React.js elements

•    Javascript

---

Warns about potential accessibility issues with your React elements.In your main application file, require the module and call it, you'll start getting warnings in the console as your app renders. Note that by default all rules are turned off s oyou need to turn them on first (by setting them to "warn" or "error").

accessibility react a11y

react-three-a11y - ♿️ Accessibility tools for React Three Fiber

•    TypeScript

---

👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support

threejs reactjs react-three-fiber a11y accessibility three react

foundation-sites - The most advanced responsive front-end framework in the world

•    HTML

---

Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototype to production, building sites or apps that work on any kind of device with Foundation. Includes a fully customizable, responsive grid, a large library of Sass mixins, commonly used JavaScript plugins, and full accessibility support. Foundation has three kinds of tests: JavaScript, Sass, and visual regression. Refer to our testing guide for more details.

css scss sass js responsive mobile-first framework eyeglass-module handlebars-helper-rel handlebars-helper-slugify

axe-cli - A command-line interface for the aXe accessibility testing engine

•    Javascript

---

Provides a command line interface for aXe to run quick accessibility tests. Install Node.js if you haven't already. This project requires Node 6+. By default, axe-cli runs Chrome in headless mode, which requires Chrome 59 or up.

axe-core accessibility a11y wcag cli testing

mini.css - A minimal, responsive, style-agnostic CSS framework!

•    CSS

---

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox. For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

css framework front-end frontend responsive web-development sass mini sass-framework css-framework minimal style-agnostic toolkit mini.css

Responsive - :iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

•    HTML

---

Other frameworks are too design opinionated and heavy. They're great for prototyping but every time you start a real, front-facing, project with them you have to overwrite lots of designer styles that do nothing to add to the functionality of the website. That costs developers time and money. Responsive BP has been built with that in mind. It is the result of thousands of hours of real, client driven web development and testing; specifically developed to be as lightweight as possible to prevent the need to undo styles set by the framework itself and allow developers to write efficient code and lower costs.

sass css rwd accessibility html5 responsive-grid

ally.js - JavaScript library to help modern web applications with accessibility concerns

•    Javascript

---

ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors. Its goal is to be A JavaScript library to help web applications with accessibility concerns. The intention is to separate these generic components from actual applications and other libraries.ally.js is published under the MIT License.

accessibility a11y focus keyboard keyboard-navigation focusable tabbing tabbable

dropcss - An exceptionally fast, thorough and tiny unused-CSS cleaner

•    HTML

---

DropCSS takes your HTML and CSS as input and returns only the used CSS as output. Its custom HTML and CSS parsers are highly optimized for the 99% use case and thus avoid the overhead of handling malformed markup or stylesheets, so well-formed input is required. There is minimal handling for complex escaping rules, so there will always exist cases of valid input that cannot be processed by DropCSS; for these infrequent cases, please start a discussion. While the HTML spec allows html, head, body and tbody to be implied/omitted, DropCSS makes no such assumptions; selectors will only be retained for tags that can be parsed from provided markup. It's also a good idea to run your CSS through a structural optimizer like clean-css, csso, cssnano or crass to re-group selectors, merge redundant rules, etc. It probably makes sense to do this after DropCSS, which can leave redundant blocks, e.g. .foo, .bar { color: red; } .bar { width: 50%; } -> .bar { color: red; } .bar { width: 50%; } if .foo is absent from your markup.

css optimization clean purge styles remove unused

Crumpet - Crumpet is a deliciously simple SASS/SCSS responsive framework that keeps your HTML clean & stays out of your way

•    CSS

---

Crumpet is a deliciously simple SASS/SCSS responsive framework that keeps your HTML clean & stays out of your way. Tidy HTML - Uses placeholder selectors to reduce the size of your HTML. No one likes messy.

sass framework

Mantine - A fully featured React components library includes more than 120 customizable components and hooks

•    Typescript

---

Mantine is a fully featured React components library includes more than 120 customizable components and 40+ hooks to manage state and UI management. Mantine core library includes all essential components: inputs, buttons, modals, popovers, typography elements, layout management, etc.

react-components react-library react hooks typescript accessibility uikit a11y design-system

precss - Use Sass-like markup in your CSS

•    Javascript

---

PreCSS lets you use Sass-like markup and staged CSS features in CSS. PreCSS combines Sass-like syntactical sugar — like variables, conditionals, and iterators — with emerging CSS features — like color functions, logical and custom properties, media query ranges, and image sets.

postcss css postcss-plugin sass scss variables conditionals iterations iterators iterables iterate contents eaches elses fors ifs includes imports medias queries query mixins defaults functions colors customs dirs system-ui image-set logical properties blocks inlines starts ends any-link font-variant overflow-wrap caniuse

vanilla-framework - From community websites to web applications, this CSS framework will help you achieve a consistent look and feel

•    CSS

---

Vanilla Framework is a simple extensible CSS framework, built using Sass and is designed to be used either directly or by using themes to extend or supplement its patterns. You can link to the latest build to add directly into your markup like so, by replacing the x values with the version number you wish to link.

sass css-framework css html vanilla-framework ubuntu vanilla framework scss mixin module