DEV Community

Cover image for A Journey Towards a More Accessible and Inclusive Web.
Mahmoud Harmouch
Mahmoud Harmouch

Posted on

A Journey Towards a More Accessible and Inclusive Web.

Demo

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

GitHub logo 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 Unpacked to install the extension from source folder.

Firefox

  • Go to firefox debugging page at: about:debugging.
  • Click the This Firefox hyperlink.
  • Click on load temporary Add-on to 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.




Flexify Landing Page

Netlify Status

Running locally with NPM

  • Fork/Clone the repo:
git clone git@github.com:wiseaidev/flexify-landing-page.git
Enter fullscreen mode Exit fullscreen mode
  • Open the newly created directory:
cd flexify-landing-page
Enter fullscreen mode Exit fullscreen mode
  • Install the required dependencies:
npm install
Enter fullscreen mode Exit fullscreen mode

Now, you can run the client:

npm start
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:3000 to explore the landing page.

Deployment

Deploy on Heroku

Deploy on Netlify

License

This project and the accompanying materials are made available under the terms and conditions of the MIT LICENSE.




Top comments (7)

Collapse
 
mneme profile image
Alex T

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?

Collapse
 
wiseai profile image
Mahmoud Harmouch • Edited

Bravo!!! Geez.... no wonder you have been poofing for quite some time. I thought something had happened to you, man.

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 been seeking for extension or API like text-to-voice for reading. Thank you so much for the hard work!

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

Can it be installed in Brave browser too?

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.

Collapse
 
mneme profile image
Alex T

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~

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer

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.

Collapse
 
wiseai profile image
Mahmoud Harmouch

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.

Collapse
 
optimisedu profile image
optimisedu

Wow great this is so useful - A11y is close to my heart and you have implemented the start of a very clever usability lib

Collapse
 
wiseai profile image
Mahmoud Harmouch

Thanks. I am currently on a mission to take A11y to the next level πŸš€.