Video Tutorial - Making An In-accessible Web App Game Accessiblg

Accessibility can be hard, especially with the lack of practical tutorials about it. So in this 1 hour and 20 minutes video, I give you a hands-on walkthrough showing how I transformed a completely in-accessible real web app (built with React.js) into an accessible one!

This is NOT just a simple landing page where we just need to throw some labels here & there. This app is a small web game that has a couple of non-simple components that’ll require some special treatment to be made accessible. But I think it will be really useful & fun to do that!!

So what you will see & learn in this video:

• Identifying accessibility issues in the app.
• Fixing keyboard navigation issues.
• Learn about "Roving Index" technique. What it is. Why is it useful.
• Fixing more keyboard navigation issues using Roving Index.
• Making the app usable for screen-readers users.
• And finally, a few small tricky things that you should be aware of to not waste a lot of time (like me)

So yeah, watch the video & I’m sure you’ll learn several new interesting things!

If you have any questions, thoughts, or feedback, please leave them in the comments, I’ll try to reply to everything.

And if you found this content useful, then please leave a like on the video for a better reach 👍

Until next time, have a nice day 👋