Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source) Learn more →
Top 23 TypeScript A11y Projects
-
Project mention: Any UI Libraries that work perfectly with Nextjs 13? | reddit.com/r/nextjs | 2023-05-18
https://chakra-ui.com/ is great. really love working with it
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Project mention: Asking for some guidance on a plugin for static websites | reddit.com/r/vuejs | 2023-05-29Though I'm not a great fan of everything going on with https://headlessui.com/ I think it integrates at the right level I would like to see and balances both integration packages for react and vue on a good level.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: Adopt open-source 'accessible' UI libraries? | reddit.com/r/accessibility | 2022-08-10
As a tech lead (or whoever makes the technical decision), it looks very tempting to adopt the open source UI libraries, if possible. In the React.js land, I used a bit of Charkra UI and Reakit.
-
8. react-colorful
-
-
Project mention: State of Flowbite: learn more about our results from 2022 and what we plan to build this year | dev.to | 2023-02-24
The open-source Flowbite libraries such as Flowbite React, Flowbite Svelte, and Flowbite Vue have been nicely growing in terms of number of components, functionality, documentation, and also usage.
-
I have created a simple segmented input component, using the not so accessible technique of having multiple input components next to each other. I know it's bad, but doing it the rci is more difficult and limiting, but now I want to make it more accessible. My approach is to make a second input element next to it, hide it with css, and make screen readers think it's the actual input field. However, I don't really know how. So, what aria attributes and what not can I give to to trick screen readers into not seeing the div and only the input and is it even doable? Here's is the general DOM structure of my component
-
Klotho
AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
-
Project mention: New to web development, How can I create a tab system? | reddit.com/r/solidjs | 2023-02-08
You should avoid implementing standardized components on your own because there is much more to consider than it seems at first (screen reader support, keyboard navigation). For this reason you usually want to use a (headless) component library. I usually use solid-healdess. You can go to it's examples folder to see how to use any of the components
-
Project mention: how do you design scrolling "through" a website? | reddit.com/r/webdev | 2023-04-20
There is an accessibility library from drei: https://github.com/pmndrs/react-three-a11y
-
design-system
Open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites. (by CMSgov)
-
Project mention: Screen reader driver for test automation (VoiceOver & NVDA) | reddit.com/r/npm | 2023-05-21
-
-
-
alfa
:wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale
-
react-headings
⚛ Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO.
-
microcode
Tile-based (text-free), keyboard friendly editor for the micro:bit V2 (beta). (by microsoft)
-
Project mention: I’ve built a fully themeable and accessible dark mode toggle component for React. [Details in the comments] | reddit.com/r/reactjs | 2022-07-20
Thank you! I'm not linking to any articles here. dark-mode-toggle is a controlled React component, so you can query the preferred color scheme with a hook like https://github.com/anatoliygatt/use-prefers-color-scheme and set the mode prop to whatever value you like, as long as it is either dark or light 😉.
-
View on GitHub
-
a11y-twitter
Small changes to how you use Twitter to promote Tweeting in an accessible manner. For now, it will only prompt once per Tweet to add alt text to an attachment before you Tweet. Simple but effective. 😎
And that's pretty much it! I may add more features to the extension in the future, but for now, it's serving its purpose for myself and other folks. Also, if you end up using it, consider starring it on GitHub! 😎
-
Keukenhof.js : lightweight and easy to use the library for modals.
-
-
web-test-runner-voiceover
A small plugin for @web/test-runner that uses VoiceOver on Mac for integrated a11y screen reader testing.
-
Project mention: GitHub - neet/react-as-prop: Type-safe `as` prop utility for flexible and semantic UI components of React | reddit.com/r/reactjs | 2022-09-21
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
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).
The latest post mention was on 2023-05-29.
TypeScript A11y related posts
- GitHub - neet/react-as-prop: Type-safe `as` prop utility for flexible and semantic UI components of React
- Need help making my component accesible
- Same UI component for all frameworks
- What styleless component library would you recommend?
- The A11Y Project Checklist
- Announcing Chakra UI Svelte
- I’ve built a fully themeable and accessible numeric stepper component for React. [Details in the comments]
-
A note from our sponsor - Klotho
klo.dev | 1 Jun 2023
Index
What are some of the best open-source A11y projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | chakra-ui | 32,934 |
| 2 | headlessui | 20,729 |
| 3 | reakit | 6,787 |
| 4 | react-colorful | 2,657 |
| 5 | zag | 2,651 |
| 6 | flowbite-react | 1,067 |
| 7 | rci | 850 |
| 8 | solid-headless | 551 |
| 9 | react-three-a11y | 432 |
| 10 | design-system | 261 |
| 11 | guidepup | 180 |
| 12 | html-validator | 132 |
| 13 | screenreaders | 130 |
| 14 | alfa | 88 |
| 15 | react-headings | 61 |
| 16 | microcode | 33 |
| 17 | use-prefers-color-scheme | 30 |
| 18 | guidepup-playwright | 28 |
| 19 | a11y-twitter | 19 |
| 20 | keukenhof | 17 |
| 21 | use-prefers-reduced-motion | 16 |
| 22 | web-test-runner-voiceover | 12 |
| 23 | react-as-prop | 7 |
ONLYOFFICE Docs — document collaboration in your environment
Powerful document editing and collaboration in your app or environment. Ultimate security, API and 30+ ready connectors, SaaS or on-premises
www.onlyoffice.com