Accessibility Pitfalls of WordPress Menus

By Captain Accessible (aka Deneb Pulsipher) �of SeaMonster Studios

Why’s it so essential to make sure your menu is accessible?

Getting around is hard without a good navigation menu that works for everyone

• internal page links can work
• footer navs are almost always accessible
• many people are coming from Google anyhow
• BUT you want them to stay, and it’s a numbers game

You’re in a race against time

Average number of seconds spent on a page*

Average number of pages visited per session**

Average depth of best-converting call to action

54

5-7

??

*https://blog.hubspot.com/marketing/chartbeat-website-engagement-data-nj

**https://www.metrichq.org/marketing/page-views-per-session/

Menus may save bounces

• Your menu as an old friend
• Your menu as a springboard
• Your menu needs to avoid some common problems

What problems might be lurking in your WordPress menu?

Problem 1 - Menu only drops down on :hover not :focus or click

⬅︎ with :hover

with :focus ➡︎

What’s it look like?

Menu on :hover

What’s it look like?

Menu on :focus

Problem 1 - Menu only drops down on :hover not :focus or click

Who it affects:

• keyboard users
• people who can’t use mice
• people with tremors
• people who prefer to navigate by keyboard
• switch device users
• people with no fine-motor skills
• people with cognitive disabilities
• sometimes screen-reader users
• depending on setup

⬅︎ with :hover

with :focus ➡︎

Problem 2 (if dropdown works on focus) - No pull up ability

Who it affects:

• keyboard users
• switch device users
• sometimes screen-reader users

Why it’s a problem

• probably* exponentially increases the amount of time needed to move (tab) through a menu—that’s 87 tabs to get to the last menu item of the last dropdown menu!

Illustration - crazy-tab-stops.jpg

*unless you implement arrow-key navigation

Problem 3 - No aria-expanded attribute

Who it affects:

• screen-reader users
• refreshable braille device users

Why it’s a problem

• visitors can’t understand the menu and where they are in it
• dropdown on click may not know there’s a submenu at all

Best practice for menus:

• 5-7 menu items: no dropdowns
• 15-20 or more: dropdowns + aria-expanded

Illustration -

Assessing the Problems

How to Assess - Keyboard and Screen Reader

Keyboard:

• Use tab and shift-tab to go through menu (tab through any skip-link)
• See if menu drops down
• See if there’s a way to make it pull up

Screen reader:

• Use standard arrow navigation to go through menu and listen for reader to say, “collapsed” or “expanded”

Inspect

Illustration -

How to Assess - Inspect

Keyboard:

• Use tab and shift-tab to go through menu (tab through any skip-link)
• See if menu drops down
• See if there’s a way to make it pull up

Screen reader:

• Use standard arrow navigation to go through menu and listen for reader to say, “collapsed” or “expanded”

Inspect →

• Find the element that triggers the dropdown and see if it has aria-expanded on it or adjacent elements, and if they change dynamically

Illustration -

How to Assess: Inspect

Find the element that triggers the dropdown and see if it has aria-expanded on it (or adjacent elements)

My assessment of 15 theme sites and 5 other big ones

The bad news

• 9/20 didn’t drop down on :focus, just on :hover
• 7 of the ones that did drop down on :focus had no way to pull menu back up
• 15/20 had no aria-expanded attribute

The good news

• Four sites worked perfectly: Google, Merriam-Webster, the Elementor demo site, and the Astra demo site!

What solutions can you implement on your WordPress menu?

Solution - PHP Remediation

What is it:

• modify the NavWalker class
• probably the best solution
• probably beyond what the average WordPress developer is capable of
• definitely beyond the scope of this presentation

How to do it:

• https://developer.wordpress.org/reference/classes/walker_nav_menu/

Illustration

Solution (dropdown only on :hover) - CSS Remediation

What is it:

• make the menu drop down on focus

Solution - CSS Remediation

How to do it:

• find the style that makes the secondary menu drop down
• use browser devtools and :hover rules
• add a :focus declaration to it

Solution (missing aria-expanded) - JS Remediation

What is it:

• use JavaScript to modify the proper aria attributes
• adds some weight to your site’s load time
• only works if visitors have JS enabled in their browsers (1.2% of internet users don’t - this is still a ton of visitors - over 62 million!)

How to do it:

• select the element
• .setAttribute(“aria-expanded”,“false”)
• Test, test, test! (in Console, Dev, Live)

Solution - JS Remediation

In addition to setting initial aria-expanded attributes, you’ll need to add an event listener on “focus” that sets the aria-expanded to “true”, and another one on “blur” that sets it back to “false”.

dropDownItems[i].addEventListener(“focus”, toggleAriaExpanded();)

Enhancement - Arrow-key Navigation

What is it:

• allow visitors who tab into the menu to move their focus around it with arrow keys

How to do it:

• add keypress event listeners while menu item has focus and push focus to desired element

• requires javascript
• is helpful for keyboard navigators and not problematic for others

The Easy Way: install Crow’s Nest plugin

Wouldn’t you rather have this guy on your lake?

Make sure your menu drops down on focus as well as hover

Adjust your CSS to add :focus trigger for :hover styles

Make sure your menu has a mechanism to suck back up for keyboard and screen-reader users

Or add arrow-key navigation

Make sure your menu has the proper aria attributes so it can be understood by screen readers

Need extra help with your menu?

Let’s connect!

​

linkedin.com/in/deneb-pulsipher/

​

deneb@seamonsterstudios.com