Greetings,
Over the past week or so, I have been diligently crafting an extension to improve web accessibility while promoting inclusivity. This project was conceived during a hackathon I am currently participating and has progressed a bit so far. After days of coding and designing, my creation is ready; an extension designed to facilitate website access for those with/without disabilities.
The extension offers you personalizable options that allow you to tailor your browsing experience according to your needs; thus enabling more inclusive navigation on the internet which will break down barriers faced by disabled individuals online. Furthermore, this tool comes equipped with an intuitive interface.
Features that the extension offers including but not limited to:
- Promote inclusivity: With features like text-to-speech and dyslexia-friendly fonts, this extension promotes a more inclusive internet for everyone.
- Available for free: This extension is open source and available for free to use on you favorite web browser.
- Customize any web page: Change the font, colors, and layout of any web page to better suit your needs.
- Easy to use: This extension is easy to use and install, so you can start customizing your web pages right away!
This serves merely as one step towards creating equitable digital environment where everyone has equal opportunity when it comes accessing websites regardless of physical limitations or impairments they might possess. In future iterations, plans are underway for even further improvements through additional powerful elements specifically tailored around helping people navigate easier than before. My hope is that together we can create better prospects in terms of convenience from surfing the net!
Thank you for reading about my endeavor! If inspired feel free to reach out, and lemme know your opinions;
🚀 Let us work together now towards making sure no one gets left behind, again!
Resources
inclusive-web-hub
/
flexify
The ultimate add-on that empowers you to customize any website on the internet with a click of a button.
Flexify
Install
Chrome
- Go to chrome extensions page at:
chrome://extensions/. - Activate Developer mode.
- Click
Load Unpackedto install the extension from source folder.
Firefox
- Go to firefox debugging page at:
about:debugging. - Click the
This Firefoxhyperlink. - Click on
load temporary Add-onto install the extension from source folder.
Supported Features
- Text to speech.
- Text Customization.
- Change contrast, saturation...
- Control the font size of the text on any web page.
- Change text color.
- Change background color.
- Align the whole text to the left, right, or center.
- Adjust text spacing between lines and Letters.
and many more.
License
This project and the accompanying materials are made available under the terms and conditions of the MIT LICENSE.
inclusive-web-hub
/
flexify-landing-page
Flexify landing page.
Flexify Landing Page
Running locally with NPM
- Fork/Clone the repo:
git clone git@github.com:wiseaidev/flexify-landing-page.git
- Open the newly created directory:
cd flexify-landing-page
- Install the required dependencies:
npm install
Now, you can run the client:
npm start
Navigate to http://localhost:3000 to explore the landing page.
Deployment
License
This project and the accompanying materials are made available under the terms and conditions of the MIT LICENSE.
Top comments (7)
Bravo!!! Geez.... no wonder you have been poofing for quite some time. I thought something had happened to you, man.
I have been seeking for extension or API like text-to-voice for reading. Thank you so much for the hard work!
Can it be installed in Brave browser too?
I appreciate your comment, Alex. Actually, I was looking for a way to build something useful instead of trash-talking about Microsoft, LMAO. I think it's important to create something that people will find useful and not just focus on the negatives. I love to create something that people will use and make a difference in this damn world.
I have figured out a hacky way to use google TTS API for free without any API key whatsoever. I was thinking about how google allows anyone to use their tts for free, then I found a couple of endpoints that you can use for that purpose. Have a look at this module that I have created
Of course. It is cross based. Currently, awaiting approvals from Microsoft and Firefox to make it available on their web stores. Next, I will publish it on the chrome web store if the project gets funded/sponsored.
Note: That's just ~5% of the extension. The ultimate goal is to allow anyone to customize any webpage like what you do with a normal text editor. I am also going to publish daily logs here on Dev to keep y'all updated regarding this matter.
Serendipity! Your endeavor can be an inspiring force for inclusive web. Would you like to take a look at Valeria's post - I’m autistic and there's something I want to do with it
She has created a Github Organisation. you maybe interested in dropping by.
I have been looking forward to more sparkles on the chemistry here~
That sounds interesting and useful! There used to be a browser extension that vanished from the store, like funkify or something, so I'm glad to see that there is something new beyond tools like WAVE / AIM which is useful but not interactive to get the feeling when actually using a website in an altered state of perception or motion.
Glad you liked it! I never heard of such tools. Thanks for the mention. Yeah, I am working on making the web feels more like a text editor, where you can move things around, change fonts, and things of that nature, like what you normally do with MS Word and such.
Wow great this is so useful - A11y is close to my heart and you have implemented the start of a very clever usability lib
Thanks. I am currently on a mission to take A11y to the next level 🚀.