TypeScript A11y

Open-source TypeScript projects categorized as A11y | Edit details
Related topics: #Accessibility #React #TypeScript #JavaScript #Responsive

Top 11 TypeScript A11y Projects

  • chakra-ui

    ⚡️ Simple, Modular & Accessible UI Components for your React Applications

    Project mention: is scss too old to use nowadays? | reddit.com/r/react | 2022-05-24

    That said, there is a significant community of developers who choose to use css-in-js tooling (I'm a Chakra UI fan, myself) or things like tailwindcss as a way to avoid hand writing CSS/SCSS. I don't miss it writing SCSS by hand, myself.

  • headlessui

    Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

    Project mention: How should I handle my modals/popups? Conditionally render in component or place them all in a global provider? | reddit.com/r/reactjs | 2022-05-15

    So far in my app i've been writing components that conditionally render a modal within it. I use headlessui so it handles placing the modal in a portal for me.

  • 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!

  • reakit

    Toolkit for building accessible web apps with React

    Project mention: What styleless component library would you recommend? | reddit.com/r/Frontend | 2022-05-12

    I'm currently considering React-aria, HeadlessUI, Radix-ui and Reakit for reimplementing the user-interface for a customer, but i find it hard to choose.

  • react-colorful

    🎨 A tiny (2,8 KB) color picker component for React and Preact apps

  • alfa

    :wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale

  • use-prefers-color-scheme

    🪝 React hook for subscribing to user's color scheme preference.

    Project mention: I’ve built two React hooks that will help you in making your apps more accessible | reddit.com/r/Frontend | 2022-01-20

    🗄 Repository: GitHub 💻 Live Demo: CodeSandbox

  • use-prefers-reduced-motion

    🪝 React hook for subscribing to user's motion preference.

    Project mention: I’ve built a fully themeable and accessible numeric stepper component for React. [Details in the comments] | reddit.com/r/webdev | 2022-04-09

    The user who experiences issues caused by motion can use the component by clicking on the increment/decrement buttons or the thumb. In this way, there is no excessive motion, though I believe the physics-based animation as a response to drag is not excessive at all. I was deep-diving into the motion-related accessibility issues when building https://github.com/anatoliygatt/use-prefers-reduced-motion.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • web-test-runner-voiceover

    A small plugin for @web/test-runner that uses VoiceOver on Mac for integrated a11y screen reader testing.

    Project mention: A11y Testing: Automating ScreenReaders | dev.to | 2021-12-30

    Digging further started to yield a little more promise with the discovery of auto-vo, screen-reader-reader, and web-test-runner-voiceover (article - just found this while writing this post!) following the finding of a tweet from Smashing Magazine and then rabbit-holing on twitter... 🕳🐇

  • access-key-label-polyfill

    Polyfills the accessKeyLabel property to improve discoverability of native keyboard shortcuts for your website. Tiny and dependency-free.

  • InclusiveShop

    React Native app demonstrating Inclusive Design

    Project mention: I made an offline-shop demonstrating common accessibility features. Feedback welcome! | reddit.com/r/reactnative | 2021-06-11

    Link to project: https://github.com/yduman/InclusiveShop

  • accessible-forms

    This is a demonstration of how we created an accessible form for a customer

    Project mention: Building accessible forms | dev.to | 2022-03-29

    In the example, which can be found on GitHub), A user is able to fill in his/her name and email address, which will be validated in remix when submitting the form. There's two states of the form. The first one will occur if there are any validation errors and the second is a toast message which will appear and dissapear when the user has successfully submitted the form.

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 2022-05-24.

TypeScript A11y related posts

Index

What are some of the best open-source A11y projects in TypeScript? This list will help you:

Project Stars
1 chakra-ui 26,115
2 headlessui 14,865
3 reakit 5,865
4 react-colorful 1,872
5 alfa 75
6 use-prefers-color-scheme 28
7 use-prefers-reduced-motion 9
8 web-test-runner-voiceover 5
9 access-key-label-polyfill 1
10 InclusiveShop 0
11 accessible-forms 0
Find remote jobs at our new job board 99remotejobs.com. There are 7 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.

Sponsored
Static code analysis for 29 languages.
Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
www.sonarqube.org