TypeScript A11y

Open-source TypeScript projects categorized as A11y

Top 23 TypeScript A11y Projects

  • chakra-ui

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

    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-29

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

  • reakit

    Toolkit for building accessible web apps with React

    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.

  • react-colorful

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

    Project mention: 16 Libraries You Should Know as a React Developer 💯🔥 | dev.to | 2022-10-04

    8. react-colorful

  • zag

    Finite state machines for building accessible design systems and UI components.

    Project mention: Zag.js – UI Components Powered by FSM | news.ycombinator.com | 2023-05-22
  • flowbite-react

    Official React components built for Flowbite and Tailwind CSS

    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.

  • rci

    🔢 better code inputs for react/web

    Project mention: Need help making my component accesible | reddit.com/r/webdev | 2022-07-16

    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)

  • solid-headless

    Headless UI for SolidJS

    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

  • react-three-a11y

    ♿️ Accessibility tools for React Three Fiber

    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: Does this belong here? | reddit.com/r/technicallythetruth | 2022-12-31
  • guidepup

    Screen reader driver for test automation.

    Project mention: Screen reader driver for test automation (VoiceOver & NVDA) | reddit.com/r/npm | 2023-05-21
  • html-validator

    HTML validation for Nuxt

    Project mention: HTML Validation for Nuxt | dev.to | 2023-01-09
  • screenreaders

    Screen reader automation tools by AccessLint, including VoiceOver.js and Auto-VO

  • 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: Microsoft/Microcode | news.ycombinator.com | 2022-11-01
  • use-prefers-color-scheme

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

    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 😉.

  • guidepup-playwright

    Screen reader driver for Playwright tests.

    Project mention: A11y Unlocked: Screen-Reader Automation Tests | dev.to | 2022-10-16

    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. 😎

    Project mention: a11y-twitter: making Twitter for web more accessible | dev.to | 2022-07-02

    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

    Lightweight and easy to use the library for modals

    Project mention: Cool & useful JavaScript libraries | dev.to | 2022-07-11

    Keukenhof.js : lightweight and easy to use the library for modals.

  • use-prefers-reduced-motion

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

  • web-test-runner-voiceover

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

  • react-as-prop

    Type-safe `as` prop utility for flexible and semantic UI components of React

    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

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