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.
- adobe-react-spectrum A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
- Vuetensils
A “naked” component library for building accessible, lightweight, on-brand applications. - 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. - 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. - niui-Native Internet User Interface
- 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. - 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
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.
https://www.oracle.com/webfolder/technetwork/jet/index.html
SAPUI5 /OpenUI5 hold accessibility support for the enterprise industry
https://openui5.hana.ondemand.com/topic/322f55d0cf1e4b459cc1911c899b7a5f
How about a11y-tabs? A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces:
agnosticui.github.io/a11y-tabs/