Keyboard Accessibility

Hi @michaelbourne,

Thanks a lot for the words, means a lot to us!

That’s definitely something we’d like to improve upon! But, on the 1st level of the menu I’m able to Tab through each menu item and navigate to the linked item with pressing Enter. Do you expect the possibility to open the submenus nested in dropdowns using arrow keys (and navigate to the nested links with Enter)? Will be nice if you could provide a link to a live example of an interaction like this — will make it really clear on what’s expected from this.

I’ll put it down in our TODO list for the future updates.

Thanks and best regards!

Hey! Second that. A way to navigate through the menues using only keyboard is mandatory to comply with accessibility guidelines. That said, many themes failes to do that.

I quickly tested a few, and found that Generate Press seems to work. Visit https://generatepress.com/, tab to the HELP menu, you are now able to open and close the submenu using enter, and tab through that.

Also – its possible to make :focus stand out more thus making it more accessible to sight impaired users. Kevin Powell made a cool video on that https://www.youtube.com/watch?v=Mvu5OMGcdVA

Proper accesibility is a another great way to make Blocksy stand out from the croud – also, in many countries its a requirement.

Looking forward to test any solution you come up with ??

GeneratePress is a good example. Another good one is https://dudetest.xyz/air/

On Air theme, the drop down indicator is the toggle for keyboards, and if you shrink your window down enough for the mobile/tablet menu to appear, it works properly with keyboard and traps the tab context (which is another big thing for accessibility).

Thanks a lot for the examples and the resources!

It makes of sense to make the dropdown indicator itself the toggle for the keyboard, instead of making the link itself the trigger for opening the submenu. Mainly because with the last, you loose the possibility of the link that has a child submenu to behave like a real, navigable, link.

And yes, all modals (not only the mobile menu modal, but really all modals from Blocksy) will need to have the focus trapping implemented in them. Probably by using something like focus-lock (Blocksy will obviously use the one for DOM els, since there’s no use of React on the frontend side of things as of now).

Will try to get something going on this in the near future, considering the rest of our priorities. If you have seen other places that could use some improvements like these — please don’t hesitate pinging us.

Cheers!

• This reply was modified 4 years, 10 months ago by creativethemeshq.

Wanted to give a heads up on this!

A properly tabbable navigation with submenus is coming with 1.7.18.
Here’s a quick preview: https://www.screencast.com/t/FMzMKNZpN

Hope that looks good!

Fast turnaround! Appreciate the effort. I’ll be sure to test it out when it drops ??