- Blogs
- Plugins and Tools
- My Experience Improving Navbar Accessibility in a WordPress Project
Plugins and Tools / 3 min read
My Experience Improving Navbar Accessibility in a WordPress Project
Web accessibility is key in any WordPress development project. Navbar accessibility, in particular, can be a defining factor in helping people of different capabilities navigate sites effectively with only their keyboards.
That’s why it’s so important for QA analysts like me to perform thorough accessibility audits and design solutions when problems arise.
In this article, we will detail how we addressed an accessibility issue in one of our client’s navbars, the solutions we implemented, and the lessons we learned in the process.
How We Identified Navbar Accessibility Issues
The rest of the QA team and I were performing an internal audit for one of our clients, Glasswing.
During one of the evaluations, we discovered that the navigation menu did not allow for proper keyboard navigation, meaning users could not move between menu items using the Tab and Enter keys.
This barrier significantly affects users who rely exclusively on the keyboard to interact with websites.
Accessibility Research and Tools
To address this issue, I began researching web accessibility best practices to implement an effective solution.
As a starting point, I recalled a similar implementation we had performed on a previous project for Latapult. In this project, the QA and development team worked together to successfully address keyboard navigation and provide visual confirmation of which navbar element is currently highlighted.
This served as an initial reference to guide the developer in the implementation.
Additionally, I supplemented my research with educational resources and international standards, such as the WCAG (Web Content Accessibility Guidelines).
I found the A11Y project checklist particularly helpful. It provides a clear set of guidelines for ensuring accessibility across all aspects of a website.
We also used Axe DevTools as the main tool to detect and fix accessibility issues. This tool helped us identify technical errors in the navbar, validate changes, and ensure that the improvements met the guidelines.
However, we did not rely solely on Axe. We also conducted manual testing, verifying that keyboard navigation worked smoothly and that every element’s focus effect was clear and consistent.
How We Improved Accessibility for Our Client
After running accessibility audits and researching, we planned the features the development team would add to the navbar to make it more accessible.
The improvements focused on ensuring the site was fully navigable using only the keyboard. To do this, we focused on two key aspects:
- Keyboard navigation. We adjusted keyboard events with JavaScript logic. This feature allowed users to move between menu items using the Tab and Enter keys.
- Enhanced visual focus. Another significant issue was that some items did not visually highlight when in focus, making it difficult for users to identify them. To improve this limitation, we adjusted the CSS so that elements in focus would stand out clearly, helping users identify their current position within the menu.
What Did We Learn From Improving Navbar Accessibility?
One of the biggest takeaways from this project was that accessibility is not optional.
Seemingly small improvements, like making a site fully keyboard-accessible, can have a huge impact on user experience and accessibility.
We also learned that working on accessibility from the start of the project is much more efficient than trying to correct issues after development is well underway.
We would recommend other developers and companies aiming to improve the accessibility of their navigation menus to:
- Perform accessibility audits very early into the project.
- Perform both manual testing and automated tests.
- Follow WCAG standards as a guide at all times.
Focus on Accessibility When Developing a WordPress Navbar
Making navbars more accessible makes your entire site more accessible, as it allows more people to interact without limitations, especially those who rely on keyboard navigation.
Furthermore, these improvements will align your final product with web accessibility standards, which is crucial for any company seeking to offer an inclusive experience.
Additionally, after implementing these features, focus on user and client feedback, as it will be essential to gauge their success and continue adjusting and enhancing accessibility in the future.
If you found this post useful, read our blog and developer resources for more insights and guides!
Related Articles
How to... / 5 min read
How to... / 5 min read
Can You Embed Systeme.io Forms in WordPress?
Yes, it’s possible to embed Systeme.io forms into WordPress. Systeme.io has built-in features that allow you to export your sales funnel forms to any website, including WordPress sites. However, there…
Read MoreBehind the Canvas / 4 min read
Behind the Canvas / 4 min read
Best Practices for Fetching Data in Next.js
Efficient data fetching is key to creating a smooth and fast user experience in Next.js apps. In this article, we’ll explore how our development team learned to optimize Next.js data…
Read MoreBehind the Canvas / 5 min read
Behind the Canvas / 5 min read
How Interactive Animations Improve the User Experience in a WordPress Site Using Framer Motion and React
Interactive animations have become more prominent in website development in the past years, including WordPress environments. Tools like GSAP, React Spring, and Framer Motion help developers create more interactive and…
Read MoreHow to... / 4 min read
How to... / 4 min read
How to Get a Notification When Someone Submits a Form in WordPress
So, you want to learn to get a notification every time someone submits a form to your WordPress site? Luckily, most WordPress form plugins enable email notifications by default and…
Read MorePlugins and Tools / 11 min read
Plugins and Tools / 11 min read
6 WordPress to HTML Converter Plugins and Tools
Do you need a WordPress to HTML converter tool to turn your website into a static, HTML-based site? This article will explore 2 plugins for converting your WordPress website into…
Read More