• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / Accessible UI Component Libraries Roundup

Accessible UI Component Libraries Roundup

Last Modified: March 22, 2021 by Raghavendra Satish Peri 6 Comments

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

Processing…
Success! You're on the list.
Whoops! There was an error and we couldn't process your subscription. Please reload the page and try again.

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: Web Accessibility

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Product Manager [Accessibility]breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog at raghava.in.

Reader Interactions

Comments

  1. Carolyn Chesler says

    March 16, 2020 at 9:20 pm

    Hello, Thank you for this list. I wonder which if any can apply to native mobile applications?

    Reply
    • Raghavendra Satish Peri says

      April 13, 2020 at 9:49 am

      No, there is nothing in this list that can apply for a native mobile according to my knowledge.

      Reply
  2. Peter Schmolze says

    April 9, 2020 at 12:38 am

    You should definitely check out the Codyhouse Framework for a whole bunch of accessible components. https://codyhouse.co/ds/components

    Reply
  3. Radoslav Sharapanov says

    April 9, 2020 at 1:32 am

    niui is built for a11y: https://niui.dev/

    Reply
  4. Joseph Shelby says

    April 9, 2020 at 7:56 pm

    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

    Reply
  5. FloW says

    June 13, 2020 at 12:08 am

    SAPUI5 /OpenUI5 hold accessibility support for the enterprise industry
    https://openui5.hana.ondemand.com/topic/322f55d0cf1e4b459cc1911c899b7a5f

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Isaac Williams on Digital Accessibility Companies Roundup
  • Vaibhav Mishra on Understanding SC 3.3.1 Error Identification
  • Vaibhav Mishra on Understanding SC 1.3.2 Meaningful Sequence
  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y