DEV Community

Cover image for Making the Web Accessible: Fixing an Open-Source Nav Bar
Derek Kahre
Derek Kahre

Posted on

Making the Web Accessible: Fixing an Open-Source Nav Bar

Keeping the internet accessible is a huge passion of mine. Whenever I can, I love jumping into open-source projects to help teams who share that same mission!

Finding the Issue

Recently, I came across an open-source repo where the maintainers were asking for help—their navigation bar was giving screen-reader users a rough time. I cloned the project to my local machine, fired up a dev server on localhost:3000 using npm run dev, and got to work.

Testing & Implementing the Fix

With a little help from AI to brainstorm the best semantic structure, I added aria-label tags and updated the markup to give screen readers proper context. I re-tested the live local build using the WAVE Chrome extension, and sure enough, all the navbar accessibility alerts vanished—without breaking the site's layout!

It brings my heart genuine joy knowing I'm helping make the web a little more accessible for everyone. Onward!

Top comments (0)