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!