When building a client website using GeneratePress recently, I ran into an accessibility issue that I hadn’t encountered before. After completing the site, I decided to run it through the Equalize Digital Accessibility Checker plugin and that’s when I discovered several “Improper Use of Links” flags in the navigation menu.
The plugin had identified dropdown menu parent items that were using # as their href attribute, which creates accessibility problems for users with screen readers and other assistive technologies. This tutorial will show you exactly how I fixed this issue and why it matters for your site’s accessibility compliance.
What I Discovered
The Equalize Digital Accessibility Checker plugin flagged several menu items with what they call “Improper Use of Links”. This wasn’t technically an error, but rather an accessibility concern that needed addressing.
The issue occurred where GeneratePress had created dropdown menus with parent items that served as category headers rather than clickable links. These parent items used href="#" to prevent navigation whilst maintaining the link appearance – a common practice that unfortunately fails accessibility standards.
Why This Matters for Your Clients
When anchor tags (<a>) use empty hash links or have no href attribute, they create confusion for users with disabilities. Screen readers expect links to navigate somewhere, so when they encounter these placeholder links, it creates a poor user experience.
For the client’s website, this meant that users with screen readers would hear “link” announced for items that weren’t actually functional links, which is misleading and frustrating.
My Solution
After researching the issue, I developed a solution using WordPress’s built-in WP_HTML_Tag_Processor API to safely convert these problematic links into proper button elements with correct ARIA roles.
The approach works by:
- Scanning through the navigation menu HTML
- Identifying links with missing or empty hash href attributes
- Converting them to button-like elements with proper accessibility attributes
- Maintaining the visual styling whilst improving accessibility compliance
Implementation Steps
Here’s exactly what I did to fix the client’s navigation accessibility issue.
Step 1: Identify the Problem Areas
I used the Equalize Digital Accessibility Checker to pinpoint exactly which menu items were flagged. In this case, it was the dropdown menu parent items in the primary navigation.
Step 2: Add the Accessibility Fix
I added the following code to the client’s functions.php file. You can also use a code snippets plugin like Code Snippets or WPCodeBox.