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 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
- Accessible design patterns by LeonieWatson
- 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)
- Australian Government Design System
- BBC GEL
- Chakra – React component library by Segun Adebayo
- Code Library by Deque University
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
- 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
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)
A “naked” component library for building accessible, lightweight, on-brand applications.
- Web Experience Toolkit (WET) by Government of Canada
Hello, Thank you for this list. I wonder which if any can apply to native mobile applications?
No, there is nothing in this list that can apply for a native mobile according to my knowledge.
You should definitely check out the Codyhouse Framework for a whole bunch of accessible components. https://codyhouse.co/ds/components
niui is built for a11y: https://niui.dev/
Oracle’s JET has accessibility as one of its core features. Yes it is still based on some older tech behind the scenes (knockout) but they are working to phase it out with an abstraction layer with the goal to removing it in the long run. They’re moving in the direction of pure Web Components.
SAPUI5 /OpenUI5 hold accessibility support for the enterprise industry