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.

• A11Y Design System
  Introducing our library of components– a toolkit of web components that are easy to use and accessible to everyone. These components not only look great but also work well for people of all abilities. With our system, you can make sure your websites are inclusive and follow the best accessibility practices. Plus, we’re working on making these components available for easy installation through npm in the near future.
• A11Y Style Guide by CarieFisher
• 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 Scott O’Hara
  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. These components all live in their own repositories. Some are written in ES5 JavaScript, and should be pretty easy to add to an existing 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).
• Accessible Solutions by haltersweb
• 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.
• adobe-react-spectrum A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
• Assets Framework by U.S. federal government website managed by the Centers for Medicare & Medicaid Services (requires 6 JS and 3 CSS files)
• BBC GEL
• Cauldron
  A fullyaccessibleHTML, CSS, and Javascript front-end framework for creating web and mobile applications.
• Chakra – React component library by Segun Adebayo
• Code Library by Deque University
• CodyHouse
  CodyHouse’s UI Framework is an arsenal of production-ready components and tools that empower web designers to craft digital experiences faster and better.
• Demos by Web Overhauls by Web Axe author @DennisL
• Foundation for Sites by ZURB
• 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.
• GOV.UK Design System — and blog post Introducing the GOV.UK Design System
• Government Service Design Manual (UK)
• Inclusive Components
  A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
• Lightning Design System by Salesforce
• Lion Web Components
  Lion web components is a set of highly performant, accessible and flexible Web Components. They provide an un-opinionated, white label layer that can be extended to your own layer of components.
• MIND Patterns from eBay by eBay/Ian McBurnie
• Modern Web Accessibility Demos by @PaulJAdam
• niui-Native Internet User Interface
• No Style by Adam Silver
• Online Accessibility Toolkit by The Government of South Australia
• Oracle JET
  Oracle JavaScript Extension Toolkit (JET) empowers developers by providing a modular open source toolkit based on modern JavaScript, CSS3 and HTML5 design and development principles.
• Polaris by Shopify
• 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.
  • Automatically calculates the perfect color tone that passes the accessible contrast tests.
  • Live accessibility errors detection: mark the elements that fail and include the solution ready to copy, paste and solve.
  • Simple and short class names to build Webs intuitively and with less HTML and divitis.
• Reach UI
  Reach UI seeks to become the accessible foundation of your React-based design system.
• Reakit – Toolkit for building accessible UIs
  Build accessible rich web apps with React
• Rivet Design System by Indiana University
• SAPUI5 SDK
  UI5 applications benefit from a consistent design language and predefined UX patterns across all frontend features. Use a predefined theme or try our online theming tool to create a custom theme.
• Simply Accessible Examples – training and workshop examples by Simply Accessible
• Tenon-UI
  Accessible React component library by Tenon.io
• The AccDC Technical Style Guide
  The AccDC Technical Style Guide is designed to provide reliable and consistent interaction designs that are accessible to the highest percentage of people possible, and to establish a baseline 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.
• U.S. Web Design System version 2 from United States government (previous version: U.S. Web Design Standards)
• Vuetensils
  A “naked” component library for building accessible, lightweight, on-brand applications.
• Web Experience Toolkit (WET) by Government of Canada