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. Learn more →
Top 23 JavaScript Accessibility Projects
-
bootstrap-vue
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
-
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.
-
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.
-
pa11y-dashboard
Pa11y Dashboard is a web interface which helps you monitor the accessibility of your websites
-
equal-access
IBM Equal Access Accessibility Checker contains tools to automate accessibility checking from a browser or in a continuous development/build environment
-
adapt_framework
A toolkit for creating responsive, accessible, multilanguage HTML5 e-learning courses.
-
Scrawl-canvas
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun
-
FastStream
Stream videos without buffering in the browser. An extension that replaces bad video players on the internet with a better, accessible video player designed for your convenience. (by Andrews54757)
-
react-gallery-carousel
Carousel component 🎠 supporting touch, mouse, keyboard, thumbnails, fullscreen, lazy loading, SSR and customisations. 💻 Live editor: https://yifanai.com/rgcd1
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Project mention: 10 UI Libraries You Should Explore for Your Next Vue.js Project | dev.to | 2023-10-294. Bootstrap Vue Bootstrap Vue combines the power of Bootstrap, a popular CSS framework, with Vue.js. It provides a wide range of components and styling options. Check out the Bootstrap Vue website to learn more.
Project mention: ADA Compliance Made Easy: ADA Testing for Websites and Applications | dev.to | 2024-04-22The reports often rank the issues by severity level and provide actionable solutions. Using these reports, developers can prioritize accessibility fixes and improve their products' accessibility. Popular examples of automated testing tools include Axe, WAVE, and SiteImprove. Also, most modern browsers offer built-in accessibility audits within their developer tools.
Pa11y is your automated accessibility testing pal (https://pa11y.org/) by Rowan Manning
Project mention: Getting started with React by building a Pokemon search application | dev.to | 2024-05-11> [email protected] build > react-scripts build Creating an optimized production build... Compiled with warnings. [eslint] src/App.js Line 64:15: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. File sizes after gzip: 58.34 kB (-1 B) build/static/js/main.b3bd969c.js 1.78 kB build/static/js/453.bd7a2879.chunk.js 677 B build/static/css/main.af098727.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment
I use the Read Aloud Firefox extension to read newspaper articles and the wandering inn stories. Works well for me. In the configuration there are free and premium voices. I enable Google Translate voice and increase the speed a bit.
Main repo (website there too, or search on Firefox extensions): https://github.com/ken107/read-aloud
The next big thing I worked on this week was helping Rachit with the creation of a new Menu Component for the application using the react-menu package.
Cboard works on Android and Windows and web browsers. It's free because it's open-source and you can turn on "live mode" in settings which lets you type your own cards and play them out loud straight away without having to store them (like TTS).
I don't like Typescript because it forces me to think about types and data structures and stuff. Which is a Good Thing because I absolutely have to think about that stuff when working on large codebases with a team of colleagues: without the inline documentation and text editor help TS gives me when working on those codebases I'd be (at least!) 10x slower when refactoring old code or adding new code. And nobody wants to pay a slow developer!
However ... the one place I refuse to use Typescript is in my side project - a JS canvas library. I can justify this because: 1. it's a big codebase, but I know every line of it intimately having spent the last 10 years (re-)writing it; 2. nobody else contributes (and I kinda like it that way); and 3. I keep a close eye on competing canvas libraries and I've watched several of them go through the immense (frustrating!) work of converting their codebases to TS over the past few years and, seriously, I don't need that pain in my not-paid-for life.
Even so, I do maintain a .d.ts file for the library's 'API' (the functions devs would use when building a canvas using my library) because the testing, documentation and autocompletion help it offers is too useful to ignore. It is additional work, but it's just one file[1] and I can live with that.
[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/v8/source/s...
Project mention: Show HN: Eliminate video buffering with a Chrome extension | news.ycombinator.com | 2023-12-08This extension will replace videos on websites with a custom one that use download acceleration to prebuffer as you watch.
It works on most websites, including Youtube. Fortuitously, it is also able to bypass Youtube's anti-adblock shenanigans.
I started this project in high school to fix the terrible video players used on most websites. Since then, I've received a lot of feedback from my users and FastStream has improved significantly. Now that most bugs have been ironed out, I think I am ready to share it here on HN.
It is still undergoing rapid development (multiple releases every week), so let me know if you see any bugs or have feature suggestions. I usually address such requests on Github within 2-3 days.
https://github.com/Andrews54757/FastStream
Web Based Demo: (some features not available)
https://faststream.online/player/#https://test-streams.mux.d...
JavaScript Accessibility related posts
-
Tailwind Handbook - Part II
-
ADA Compliance Made Easy: ADA Testing for Websites and Applications
-
How to Write Accessible Technical Documentation – Best Practices with Examples
-
🤯 150 Articles to Satisfy Your Curiosity
-
Responsive design and cross-device testing
-
Deque Systems Sues BrowserStack for Intellectual Property Theft
-
Ask HN: Any good (free?) TTS article readers?
-
A note from our sponsor - SurveyJS
surveyjs.io | 22 May 2024
Index
What are some of the best open-source Accessibility projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | bootstrap-vue | 14,462 |
2 | web-skills | 6,850 |
3 | axe-core | 5,682 |
4 | pa11y | 3,974 |
5 | eslint-plugin-jsx-a11y | 3,335 |
6 | a11y-dialog | 2,376 |
7 | chakra-ui-vue | 1,855 |
8 | ally.js | 1,521 |
9 | read-aloud | 1,270 |
10 | react-menu | 1,105 |
11 | pa11y-dashboard | 972 |
12 | cboard | 641 |
13 | equal-access | 612 |
14 | adapt_framework | 567 |
15 | svelte-navigator | 504 |
16 | pa11y-ci | 500 |
17 | Scrawl-canvas | 313 |
18 | arxiv-utils | 270 |
19 | accessible-slick | 244 |
20 | handy.js | 239 |
21 | vue-announcer | 229 |
22 | FastStream | 258 |
23 | react-gallery-carousel | 212 |
Sponsored