The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 TypeScript Accessibility Projects
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
primitives
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
-
-
noUiSlider
noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
-
themes
Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
player
UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js. (by vidstack)
-
date-picker
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
-
Spearmint
Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of a button. (by open-source-labs)
-
-
-
react-modal-sheet
Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
-
-
-
lighthouse-check-action
GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more!
-
plyr-react
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
-
ej2-javascript-ui-controls
Syncfusion JavaScript UI controls library offer more than 50+ cross-browser, responsive, and lightweight HTML5 UI controls for building modern web applications.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
Catalyst is a comprehensive, fully componentized UI kit for modern React projects, built on the next generation of Headless UI. With Catalyst, you can create a custom set of components to use and reuse in your projects.
Project mention: What to avoid building as an early stage startup | news.ycombinator.com | 2024-03-03
Project mention: Radix Primitives: an open-source UI component library | news.ycombinator.com | 2024-03-20
Project mention: Accessibility and Headless UI Libraries - Adobe, Radix, Tailwind, MUI | dev.to | 2023-09-24Adobe - React ARIA
🔍 Site ⭐ GitHub
The individual sliders are built using this: https://refreshless.com/nouislider/
🔍 Site ⭐ GitHub
Zag.js and Ark are headless component libraries created by the teams behind Chakra UI.
vidstack is very light on technical details but starts with a concise intro and a screenshot, as well as relevant links: https://github.com/vidstack/player
payload is well-structured in general: https://github.com/payloadcms/payload
nanostores starts out with an intro and telling code examples, followed by lots of technical details: https://github.com/nanostores/nanostores
You can also do this with the Stylebot extension - https://github.com/ankit/stylebot .. I was already doing this :) (just copy paste the CSS)
Project mention: Show HN: Accessibility Aid – Fixed Price WCAG and ADA Compliance | news.ycombinator.com | 2024-03-05Hi Roy,
Thanks for sharing! I think it's great that more orgs/folks are trying to make the Web more accessible.
I'm also a web dev with some experience, and I've done a few accessibility projects, both in-house and with third-party consultants.
My main feedback is this: I would've loved to have been able to outsource to/partner up with experts for more of that work, but that would've been difficult at your prices. €2k-€4.5k/mo was between half and all of my salary as a full-time dev (working for small biz). On an ongoing basis, that would've been quite unaffordable.
If you're truly interested in making "accessibility achievable and affordable for organizations of any size", might you consider a pricing model where it's X dollars for the initial work (where the bulk of it lies, in terms of initial design/audit/etc.), and then a lower Y dollars/mo for maintenance (reviewing some new content and pages, etc.)? Possibly also some sort of allowance/sliding scale for smaller sites or smaller orgs?
In my experience, much of the work is frontloaded. Having to pay the same price month-to-month where subsequent months might not be much work at all is a tough sell. And in my experience, all-included subscription services like this often tend to be "best effort" anyway, especially for smaller customers who are competing for limited dev/design time with your bigger clients. At lower monthly costs, that's still a fair enough value proposition, but at four-figures a month... that's easily the territory where smaller companies might consider in-housing instead. And sure, people could subscribe for just a month or two and then cancel, but that feels disrespectful/dishonest.
In the past accessibility projects we've done, the upfront audits cost a few grand on a mid-sized site. We were presented with various reports and tables (several tens of pages worth), but it was really just a checklist of things we'd go down and address. The actual fixes took about a week of dev time. Then on an ongoing basis, we just followed the same recommendations for our new content, occasionally using free tools like Microsoft's free Accessibility Insights (https://accessibilityinsights.io/) to double-check our pages for problems. These days a lot of it is built into IDEs too.
That's not to say automated checklists are sufficient and can replace human expertise (yet), but they do take care of a lot of the low-hanging fruit, especially for ongoing content updates that follow the same format as previously audited pages/sites.
Now, the above was just my personal experience primarily working for small biz and nonprofits. If you're primarily targeting bigger enterprises or early 2020s-style startups with infinite money, and purposefully trying to exclude smaller customers, that's totally valid and maybe that pricing makes sense? (It's probably cheaper to them vs hiring AAA labor in-house). But for smaller orgs, your prices are often more than their entire website budget and nearly as much as an additional staff person. If you truly want to target them as well, would you consider something that's more suitable for their budgets?
---
Altogether separate than the pricing thoughts: It would also be lovely to see some demo reports/audits, or before/after screenshots etc. This is the sort of endeavor where the quality of consulting/auditing can vary a lot between service providers, and being able to see examples of your previous work would mean a lot.
---
Thanks again for sharing, and I hope this feedback wasn't too harsh! Just my 2¢ as someone who wishes more companies would voluntarily take this work on.
Project mention: Screen reader driver for test automation (VoiceOver & NVDA) | /r/npm | 2023-05-21
Project mention: We need more headless ui library, and I just spotted a good one | /r/sveltejs | 2023-07-11
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript Accessibility related posts
- Headless UI - a great components library for Vue & React
- Radix Primitives: an open-source UI component library
- Show HN: Accessibility Aid – Fixed Price WCAG and ADA Compliance
- React: Build your own composable, headless components
- Focus Management: how to improve the accessibility and usability of our components
- Show HN: Visualization of Page Accessibility Tree
- Ask HN: Best Practices for Accessible Websites
-
A note from our sponsor - WorkOS
workos.com | 28 Apr 2024
Index
What are some of the best open-source Accessibility projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | headlessui | 24,217 |
| 2 | darkreader | 18,697 |
| 3 | primitives | 14,192 |
| 4 | react-spectrum | 11,607 |
| 5 | reakit | 7,627 |
| 6 | noUiSlider | 5,600 |
| 7 | themes | 4,084 |
| 8 | zag | 3,654 |
| 9 | player | 1,715 |
| 10 | date-picker | 1,706 |
| 11 | stylebot | 1,351 |
| 12 | Spearmint | 1,282 |
| 13 | accessibility-insights-web | 813 |
| 14 | react-accessible-accordion | 781 |
| 15 | react-modal-sheet | 730 |
| 16 | terracotta | 642 |
| 17 | Midnight-Lizard | 615 |
| 18 | react-three-a11y | 516 |
| 19 | lighthouse-check-action | 458 |
| 20 | plyr-react | 456 |
| 21 | ej2-javascript-ui-controls | 387 |
| 22 | guidepup | 382 |
| 23 | grail-ui | 374 |
Sponsored
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com