Accessible UI Component Libraries Roundup

Here is a list of accessible UI components that you can use for your next project. Please do let me know if there are any resources that are missing & they will be added to list accordingly.

• The AccDC Technical Style Guide
  The AccDC Technical Style Guide is designed to provide reliable and consistent interactiondesigns that are accessible to the highest percentage of people possible, and to establish abaseline for Functional Accessibility that can be utilized, built upon, studied, and tested against.

  Functional Accessibility means that each component is fully accessible from the keyboard, with or without a screen reader running.

• Cauldron
  A fullyaccessibleHTML, CSS, and Javascript front-end framework for creating web and mobile applications.
• PUXL framework: Build the accessible Web. Save energy.
  PUXL is a free and open-source and eco-friendly library to create front-end Web interfaces.
  It helps you build accessible and responsive sites with lightweight HTML.
  • Live accessibility errors detection: mark the elements that fail and include the solution ready to copy, paste and solve.
  • Automatically calculates the perfect color tone that passes the accessible contrast tests.
  • Simple and short class names to build Webs intuitively and with less HTML and divitis.
• aditum-Accessibility components for managing focus in React SPAs
  Aditum is a custom React component library to support developers in writing accessible and WAI-ARIA compliant single page applications (SPAs). In React SPAs, there is no page load after the initial one. When the content gets updated without a page load, screen reading software has no idea by default, leading to a confusing experience and potential lost customers for users interacting with the site via a screen reader.

  Setting the focus manually can be tedious, especially for larger applications. Aditum provides a more automated solution to guide focus across your application to provide a better experience for users accessing your site via a screen reader.

• Inclusive Components
  A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
• Code Library by Deque University
• Accessibility section – jQuery Plugins – By Nicolas Hoffmann
  This section, as the subdomain shows, is here to propose jQuery plugins for simple elements (tabpanel, hide-show system, etc.) including accessibility. These plugins are designed to be as light as possible, and easy to use.
• Accessible Components by scottaohara
  I’ve built a good handful of accessible markup patterns and widgets at this point. Each is based on testing with users, UX and design needs of past projects, and from following W3C specifications & notes. I do enjoy making these 🙂

  These components all live in their own repositories. Some are written in ES5 JavaScript, and should be pretty easy to add to an exiting project. Other older scripts require jQuery as a dependency. There are even a few that are just straight markup patterns, and any additional functionality would need to be supplied via the underlying language of a particular project (e.g. PHP, Ruby, more JavaScript).

• Reakit – Toolkit for building accessible UIs
  Build accessible rich web apps with React
• Reach UI
  Reach UI seeks to become the accessible foundation of your React-based design system.
• Frend — A collection of accessible, modern front-end components.
  Frend components are modest and dependency-free. They are built with web standards as a priority and aim to avoid assumptions about tooling or environment. Care has been taken to make sure each component is compliant, keyboard navigable and properly interpreted by assistive technologies.
• Lion Web Components
  Lion web components is a set of highly performant, accessible and flexible Web Components. They provide an unopinionated, white label layer that can be extended to your own layer of components.
• Tenon-UI
  accessible React component library. by Tenon.io