WordPress Menu Accessibility – Part 2: Detailed Requirements and Final Test

In this video, I’m going to do a deep dive into the requirements to make an accessible Website Navigation Menu.

A few weeks ago, I did a comparison of the menus in several major themes and page builders. The results were disappointing, to say the least. If you haven’t seen it already, check out the link in the description since it gives a good overview of the things I look for.

In that video, I said I was going to do a round-up of all the menus and how they stacked up against the testing criteria. Well, the videos caused quite a stir, and most of the vendors I tested started working on their menu accessibility. That’s good for the internet, but a pain in the butt when I had videos planned!

So, instead of doing a roundup that will be outdated within a few days, I’m just going to test the newly released Twenty Twenty-Three theme in WordPress 6.1, and I’ll show you the specific criteria as I go along.

I’m Adam Lowe, President of Peak Performance Digital. If you find content like this helpful, I’d love it if you can give me a thumbs up and hit that subscribe button.

We’ll start with a new WordPress installation with the Accessibility Theme Test data loaded. The only change I’ve made to this site is to set the menu in WordPress to one of the test menus that we just loaded.

I’m going to go through this test in a few passes. First, I’m just going to do a visual inspection with my mouse, the way a typical person would use the menu. I’ll check it at 100% scale and 400% scale.

Then, I’ll try navigating with the keyboard, again at both regular desktop scale and mobile scale.

Next, I’ll turn on the screen reader to hear what the menu sounds like to people who rely on them.

Lastly, I’ll go step-by-step through the criteria I gathered from the W3C on how an accessible navigation menu should work, and we’ll see how this does.

So first let’s just hover over these things and we can see when I hover over each menu, I’ve

got an underline that indicates that I can do something to it.

When I go over to one of the dropdown menus, it opens the dropdown.

I don’t have any glitches When I moved from the top navigation item down to the sub menu.

And again in the sub menu we can see that the items

underline when I mouse over them. So all-in-all this looks pretty simple and pretty good.

Now let’s zoom in a little bit, go to 400% scale.

And here we’ve got the navigation hamburger menu. I’ll click on it to open it up.

And we can see that home is underlined with a dashed underline,

and I wonder why that is. Because it’s not the item that we’re on right now.

I would expect that this item.

Oh, you know what it is. It’s because it’s focused with the keyboard, that’s why it’s underlined.

Okay, so when I mouse over each of these we get a regular underline,

and that seemed to work okay. I can see everything. Our sub menus automatically are expanded here on the

mobile menu, and that’s fine. So visually I’d say that everything looks okay Nothing’s going off the page,

nothing looks out of the ordinary. Next I’m going to use the keyboard And for this we use the tab key to move around.

We use shift tab to move backwards and to open a sub menu we’re going to hit enter and space bar.

On either the the top level menu item or a button that controls the dropdown.

So both enter and the space bar should be the keys that work.

So let’s just have through. I’ll get through my Chrome menu and we’ll go through the WordPress menu We’ve got the log out.

And the next thing I see here is a skip to content button. And there’s some debate about

whether the skip to content button should be after the WordPress admin bar or

or before it. I prefer being after, and the way that I see it most often is after.

So let’s just make sure this works, I’ll hit enter. Even though that’s technically not something controlled by the menu.

I like to test it as part of the menu because it does affect how somebody would use a menu or

skip past it. All right So that worked the way I expect it to, now we’ll go ahead and tab through

and I am focused on 2023. But, what we can see, are two different things that show me that I’m focused on something.

One, is that I have a dashed underline on the focus item.

And the other thing is that I have a solid box around it.

So this is again one of those accessibility criteria where it says that you need

a different way to show that you are focused on something, then just hovered over it.

So that looks fine for the site icon.

Now we’ll go into our menu and home get the same thing.

So tabbing across all the top level menu items works. And that’s good

because as I tab through things with a dropdown it’s not opening up the dropdown.

Again that’s one of the criteria. we’re going to do shift tab to make sure that we can go backwards.

That works fine. And now I’ll just have all the way through to make sure that my keyboard isn’t trapped inside the menu.

And that yes it does go down to, the body content. That’s it, now we’ll go back to the top of

the menu. And, now I’m going to go over to look at a dropdown.

And I liked the way that WordPress does this. There’s really two different ways that you can do

a dropdown one is by using the top level menu item as the toggle.

The other is by putting a button as the toggle. So that’s what we have or here

We’ve got this top level menu item that’s actually a link to take you to the about page.

And then right next to it is a button. And this is the thing that actually opens and closes the dropdown.

When we use the mouse to have hover or something we can’t really tell that there’s a difference

because of the way that the menu is coded, but with a keyboard we can.

So if I do this I can hit enter. And that will take me to

the link just as I expect. And if I hit space bar on the link,

it scrolls down the page. Again, just as I was expect when I’m using

keyboard navigation. On the button,

this is the thing that controls the dropdown, I can hit enter to open it.

Enter again closes it. I can hit space to open it and space again to close it. And good, that’s exactly what I expect.

So I’m going to open it and I’m going to tab in. And once I’m in

here again I’m seeing that my focus indicators all look right.

I’m going to hit the escape key to see if that closes the menu and what they should do, is close

the menu and return the focus to my button.

And there, it returns it there. So now I’m going to enter one more and that goes right in.

The next thing I’m going to look at is whether tabbing all the way out of here closes the menu.

Which it does. So sometimes I’ve seen where you can tab all the way through a sub menu and it

doesn’t actually close the sub menu, it leaves it open until the next one’s triggered.

All right, I’ll come over here to this button and open it up because here we have nested sub menus.

And this is generally not good for accessibility at all, using nested sub menus is pretty much

bad practice but it’s something that WordPress does support.

So again, inside of here, we have the first level link.

And then next to it is the button. When I click on that, it opens up the sub sub menu.

Hitting escape closes the whole thing, and that’s fine. And tabbing all the way through does what I expect.

Next thing I want to do is go through here and now try shift tabbing to make sure that when I tab

backwards through a sub menu it still closes.

And yes it does. All right So keyboard navigation seems to work just as I expect, no problems there.

Next thing we’ll do is we will turn on a screen reader. For this I’m going to use the free

NVDA screen reader. I’m going to bring the speech viewer onto the screen so you can see what

it’s saying as well as here it. Okay, so you I have the screen reader turned on,

and we’re going to start listening to the page. [Link Logout. Visited link skip to content]

[Banner Landmark link current page Twernty Twenty-three.]

[All pages navigation landmark list with 8 items visited link home visited link blog]

[link level one, button collapsed Level 1 submenu] link Lorem Ipsum. Visited Link Page A Link Page B out of list, main landmark heading level one front page.]

[Use a static page to test the theme’s handling] So now it’s read through the entire menu. And there’s a few things that I want to point out.

First of all, once we got through the WordPress admin menu we heard the skip to content link.

Then it says better landmark link current page 2023. And that’s the icon that has a link back to the homepage.

The next thing we hear, is that we are in a navigation landmark and it’s a list with eight items and that’s the menu.

So it was good that reads that there’s a list and that there’s eight items in that list because that’s how people can tell where they are inside that list.

so then it starts going visited link home visited link blog.

And that reads the first top level menu items.

Then it goes visited link current page front page. And that’s good too because it tells us where in the menu we are

on the website. And that says that we are on the front page of the website and that we just hit the menu item for that page.

Then we go to about the tests, and after that we hit something that says button collapsed about the test sub menu.

So “about the test” has that sub menu, but because it’s a top level link, it reads it as the

link And then the next thing that we hear is “button collapsed ‘about the test’ Sub-menu”.

Then we go to level one and then it says, “button collapsed level one sub menu.”

So not only is it reading that there’s a sub menu, and that there’s a button to control that sub

menu, but it’s again reading the name of the top-level menu items so that people can orient themselves.

And I should also mention that after page B it went ahead and started reading the content of the page which is also good.

Now let’s use the tab key because this is how people are going to navigate through it. Okay, So there we have the skip to content link.

[Banner landmark 2023 link current page.] And that’s our site icon. [All pages navigation landmark list with 8 items home visited link]

We can hear that we’re inside the menu now. [blog visited link front page visited link current page about the tests visited link]

[about the tests submenu button collapsed] Great, now I’m on the button and we’ll activate that. [expanded] Now it says that it’s expanded

but it doesn’t say anything because we haven’t actually gone into it. So I’ll hit tab again [list with 5 items page alignment visited link]

Now it tells me about the menu that we’re inside of. [Page markup and formattinhg Visited link.]

[Clearing floats link. Page with comments link. Page with comments disabled link.]

[Level one Link.] And you can hear that it took us back to the

top level menu item, but it didn’t say anything about it closing that sub menu.

And this again is just a function of the way that screen readers work with those dropdown menus.

It doesn’t tell us when we’re out of it, but it will tell us when we’re back at the top menu.

And we just need to orient ourselves in our head as to where we are.

Before I close the screen reader I want to zoom in to four hundred percent and we’ll hear what it sounds like when it’s in mobile view.

[Skip to content Visited link.] So the first thing we’ve got is the skip to content link. That’s great.

[banner landmark 2023 link current page] There’s our site icon.

[all pages navigation landmark open menu button submenu] Now we have the navigation button.

So I’ll activate that and see what happens. [menu dialog list. list with 8 items home visited link menu]

[Visited link home, visited link blog, visited link current page front page.]

[Visited link about the test. List with 5 items visited link page image alignment visited link page markup and formatting. Link clearing floats]

[List with three items Link level two. List with 3 items link level 3. Link Level 3a]

[Link level 3b out of list. Link level 2a. Link level 2b out of list. Link Lorem Ipsum.]

[Visited Link Page a. Link Page B] And because the mobile menu doesn’t have sub menu dropdowns

it just lists everything in there the way that we would expect. So let’s make sure the tabbing

works properly both forward and backwards. And we should be okay. [Blog visited… Front page visited…]

Everything’s working just the way we expect. I can go through both the top menu as well as the sub menu links.

I’ll hit escape and that should close the menu. [Menu button submenu open menu] And I’ll hit the space bar to see if we can open

it up that way as well. [Menu dialog. List] Yes, and that works just as we expect.

The only thing that struck me as odd was when I opened this menu. It puts the focus on the

first menu item, not the close button. And that’s what I would’ve expected. [Menu dialog]

[list with 8 items home visited link. Close menu button] I would have expected focus to go on the close menu button right

away so that I could just hit that same button to close it again.

[Menu button submenu open menu]. But I don’t think this is a deal breaker.

Okay, so doing that It seems like the screen reader test works just fine in the mobile

menu as well as the keyboard test on the mobile menu.

So I’m going to close the screen reader and I think we’ll be good to go there.

And for these tests, I’ve come up with a list of 50 different criteria and, mapped them against the WCAG

and the WCAG levels. So we’ll go through each of these one by one.

The way that I came up with those is by looking at several of these documents here on the W3C.

So we’ve got this menus tutorial which is a fantastic document. This has a great overview of

the structure of the menu as well as the styling and how we should do fly out menus.

And then we have this example navigation disclosure menu that has top level links.

So this has some good information about how

the menu should operate, what roles property states and attributes it should have, as well

as how it should work with keyboard. There’s also this excellent link here from the W3C.

And this is an important one. I just want to bring attention to this box right here that says “Although

this example uses the word menu in the colloquial sense to refer to a set of navigation links,

it does not use the aria menu role because the menu and menu bar roles require complex functionality

and first character navigation. That’s unnecessary for typical site navigation.”

So what this is saying, is that there’s a difference between an

application menu that you would see in something like notepad

or Microsoft Word and a website navigation.

An application should use the menu bar and menu patterns, but a

website navigation should use the disclosure navigation menu pattern.

I’m just going to open up notepad here so that you can sort of see the difference.

With an application I would expect to be able to do something like control F to open this dropdown.

And then navigate with arrow keys up and down as well as submenus that way.

And then escape would close it. So arrow key navigation is what we would generally expect in an application like this.

On a website, Arrow keys don’t do anything.

We expect to navigate using the tab key, the space bar, and enter.

We also don’t have that ability to do something like Alt F two use first letter navigation.

So they really are different patterns. It is a big problem, that I see people try to use this

menu bar pattern for website navigation and it’s really not appropriate for it.

So that’s definitely one of the things that we look at here in the criteria.

And you’ll also notice, if I go over here to the navigation menu bar example, It gives us that

same warning again. It says “caution don’t use this for site navigation”

that the more suitable pattern here is the disclosure pattern.

And that example disclosure night navigation menu is the one to use.

And then here with this disclosure navigation menu we have two options. One has a top level link The other one doesn’t.

And for website navigation almost every website that I’ve gone to has a top level link, so that’s generally the one that I will turn to.

So let’s come in here to the menus. And the first test that we have is that the page needs a

way to skip repeated content such as the navigation menu That’s using our skip link.

So I’m going to pass that. Then we want to check that the navigation menu is structured as a list.

So to check out the structure I’m just going to right Click on that and go to inspect.

And this is going to open up our dev tools. And we will see that we have our list here.

This is our unordered list. And our list items inside of it.

So the way this is structured the unordered list is the wrapper for the menu.

The list item
Holds each one of these guys and inside of there is going to be a link.

And then inside of that is a span for the name.

For dropdowns we’ve got a list. With a link that holds the text.

And then a button. With an icon in there.

And then inside of that is another list So we’ve got a nested list inside of a list
And then

inside of that nested list is the same thing where we have our list item.

With our anchors. And spans. So that passes it

is structured as a list
Is it enclosed in the nav element.

And that’s the thing that’s going to instruct the screen reader to tell us that we’re inside of

a navigation menu
So let’s take a look at what we have.

We’ve got our unordered list. And that is enclosed within a nav.

We’ll also see inside this NAB is an aria label called all pages And this all

pages is the name of the menu that I have created inside of WordPress.

So this navigation tells us which menu we’re in as well.

That’s a pass. Manual menu is labeled with a descriptive

name There we go That’s what we just talked about So that’s a pass.

Menu items do not use incorrect elements roles or attributes such as menu or menu bar element.

so we guess it follows the disclosure menu pattern There’s a pass.

Now we have to look at how we indicate the current item.

And we’ve got two options. One and this is probably the least

used is by using invisible text that says current page is whatever.

The more common way to do it is to use this aria current equals page.

We heard this when we were using a screen reader. When we got to front page and it read front page current page.

So let’s see how that works in the code. We’re on the front page.

Let’s inspect our element. And yes there we have it.

When our link, we have an aria current equals page, and this is the thing that tells us where

we are
And I’m going to set these two to N a.

Decorative and functional icons have text alternatives or ignored by screen readers.

So this SVG here for the dropdown button should be one of those.

And we see it’s got an aria hidden equals true so that it doesn’t try to read this.

So that passes. And he was appropriately sized to fit all text.

So this is saying that we can actually read all the texts that’s in there even if it’s very long, let’s just take a look.

And yes it’s wrapping the text around the sub menus. No problems there
Menu adapts to long

words or large-scale text We saw that when we zoomed all the way up and that was past.

And you avoid all uppercase text line breaks and LiveNation. Yes.

Sufficient white space to support people with reduced dexterity and smalls touchscreens.

Yes. And that’s one of the things that I looked at when we zoomed all the way in like this.

Is that there was enough space between each of these items that we wouldn’t fat finger something.

These sub menu items are a little bit borderline but I’m going to allow it.

The WCAB doesn’t really specify what sufficient means.

menu items No overlap themselves were paid content When the tech sizes increased.

Correct It did not do that They worked just fine. The dropdown did go over the page content but that’s expected.

Menu items are identifiable using venue visual styles.

And yes that was one of the first things we looked at was that right now we just

see a bunch of words at the top but when we hover over we can tell that.

They are menu items because they have the underline there.

there’s lots of other ways to do it We can use boarders we can use colors all sorts of things

like that
The originally styled to indicate that they can be

activated again Yes That’s a pass because they underline.

visual style changes to indicate hover state Yes it does.

And then here we go This is one that we’re going to see quite a bit. Is that more than just colors used to convey hover state?

It’s because the WCAB says that we can’t use color only to indicate that something has changed states.

It needs to if we’re using color we also need to use something else.

So because we’re using an underlying that’s a pass. did the visual style change indicate that the state was.

Yes it did. When we’re hovered we have a solid line when it’s focused.

We get a dotted-line plus we get the focus outline there

Visual style changes indicate that the menu was activated Let’s find out about that.

And activated means that when I click it before it actually does the thing that it’s doing or

while it’s loading the page for example, we’re going to see the visual style change.

And yes it did. Visual style changed from a solid underlying.

To adopt it
And yes more than color was used.

And this is one of the changes that I saw in the 2023 theme 2022 did not have this but now

we are able to pass that and that’s the WCAB level Triple a requirement.

visually indicate the current menu item In addition to other structure.

Mark-up. So that’s saying that. I’m on the front page.

This should tell me. Visually that I’m on the front page It does not.

So I’m going to fail that. And this is a level triple a.

so it’s not critical level AA is generally what you want.

for accessibility reasons AAA has kind of both. points.

And since this next one is dependent on that I’m going to say not applicable.

Mobile menu button can be targeted activated enclosed use the keyboard We tested that already So yes at the past.

Pressing the escape key on the top level menu item of a mobile menu closes the menu or menu panel and returns focused to the trigger.

Yes that was a past. Sub menus are contained as a list within a list item.

And again that’s what we saw when we looked at this.

And the inspector. We have our list item. And inside of there is another unordered list.

So yes that is also a past
Is that been used or

indicated visually such as using an icon and yes that’s our little dropdown Chevron.

they’re indicated using markups such as aria expanded. Let’s take a look at that.

And here we need to see this aria expanded. We need to see this on the dropdown trigger.

this is another error that I see a lot of places that this is on the wrong thing I’ve seen RA expanded on the list Item element.

I’ve seen it on the anchor element. But it belongs on whatever else.

is being used to expand that dropdown. So if it’s a button that’s being used the RX bandit needs to be on the button.

If it’s the anchor that’s used it needs to be on the anchor. This RIA expanded false should

change depending on whether we have the menu expanded or not So let’s take a look at whether that works.

So I have are about the test sub menu. And when I hover over it

We should see that aria expanded equals false changed a true.

but we’re not seeing that right now When I hover over. Let’s see what happens when I use the keyboard to open it.

When you use the keyboard to open it are you expanded Equals true Does change
So that changes

with keyboard but does not change with the mouse for some reason
So let’s come back and we’ll

take a look at some of these requirements here Seven user indicated using markup Yes it does.

The indicated behavior is predictable and identifiable Yes. And this is saying that we don’t

want something in there that people aren’t going to immediately recognize.

The element that shows and hides content is a button or has a roll button.

So yes it is a button. On the contents visible the element.

shows high the are expanded to set the true when the hidden it’s at the false.

I’m going to make this a partial because it does not change when it’s activated with hover only the keyboard.

This has been a problem with the WordPress navigation menus for a couple of versions Now.

I’ve seen it with other products as well. Only elements that control dropdowns have already

expanded attributes That’s what we talked about earlier Yes it passes.

And that saying that it should not be on a link item or anything else
Here’s an option one

that says that we can use the REO controls attribute on the

button that would indicate the element ID of the dropdown.

this functionally doesn’t really do anything. But it is

something that we could put put on there if we really wanted to be ambitious.

Fail optional. And here we talk about how we open the fly out.

And we’ve got those two different ways of doing it We can do it with a parent item where we can do it with the toggle button.

Since we’re not using the parent item I’m going to do any for these
And here we have the toggle button.

So a button element opens and closes sub menu. Yes it does.

There’s an attribute where invisible label on the dropdown trigger alerting the users the activating it will show her hide the sub menu.

And we heard that when we use the screen reader Yes. And we can see that visually by seeing

that we have this aria expanded equals false And that’s what’s going to tell the screen reader

to read that it’s collapsed or open
So because of that we pass.

Then we have the parent’s menu items included on the buttons label.

And when we look at the button we have an aria label that says about the test sub menus That’s

good because this is the parent menu items about the tests And then we say about the test sub

menu
The drop down menu stays open when the parent menu and 70.

Hubbard. This is one of the first things that we tested
And that’s just saying that when I

hover over this and go down it doesn’t close the sub line You were doing anything weird
The

seven years hidden or shown based on when the parent menu items Hubbard.

This is optional because you can open or close a sub on you using

either hover or click, and both ways are perfectly valid.

And then we have this one that says that there’s a slight delay closing this up menu When the mouse leaves the area.

And this is. people that have motor problems. That it doesn’t close the subbing you right away

When I mouse out whoever this one does.

So I’m going to fail that as an optional failure

Seven you should not open when using the tab key to navigate through the menu.

And that’s good because. We can go all the way through the top level menu items, without it automatically opening this up in you.

And this is one of the problems that I see in a lot of menus as well is that when we hit one of

these it’s going to automatically open and now I have to tab through each one of these and.

Keep on tapping until I get through all the sub menu items. And that’s just a pain in the butt

for somebody who has to use their ears, or only use a keyboard to navigate through
So

this is a pass
Tab key moves focused among the top level items and drop down Yes.

Shift had moved backwards Yes. Space on the top level

menu item with the dropdown toggles the visibility Yes it do.

Enter toggles visibility Yes it did. Enter activates focused links in the menu.

Yes it does. So we’ll do this
I will just use enter to go to about the tests

And we tested that That was one of the first things that we tested with the keyboard.

And it worked just fine
Keyboard focus does not get trapped in the menus sub menus or menu panel.

No it does not So that’s a pass and my keyboard trap that means that.

Once I’m in here. I can get out and then it goes to the right place.

It doesn’t my keyboard Doesn’t get stuck in here
So that’s a past.

Escape key closes the open dropdown and sets focused on the button that controls it Yes it did.

And we’ll just demonstrate that one more time. Would hit escape and that closes it and sets focus back there.

And then the sub menu closes when the keyboard focuses lost And again that’s one of the things that we already tested.

And I’ll just do it one more time. And that’s just saying when I tab out of the menu, it closes.

So all in all this menu from WordPress 6.1 the 2023 theme is really nice.

and it passes almost everything. it fails this one.

to visually indicate the current menu item I bet that’s something that we can do with CSS.

The biggest problem I found was that Rex banded does not change the true when I hover over it,

it only does it when I activate it with the keyboard
Other than that we’re in great shape here

I hope you found all those helpful I’ve walked through each of the criteria and tried to explain it as I go along.

You can do these tests just as well as I can and create your own spreadsheet to track things as you go.

Let me know your thoughts ideas and opinions in the comments below. And as always if you found

this video helpful please hit that like button and

subscribe to the channel. I’ll see you next time.