Exploring pure CSS navigation
I received a tweet from Šime Vidas who kindly went through the trouble of running the site through VoiceOver on OSX and pointed out that Apple's solution has two problems:
- Opening and closing the menu doesn't set focus to the correct element - when activating the "open" anchor tag, the target is the hidden checkbox, requires one tab press to move onto the "close" anchor, and another tab to the first menu item.
- You cannot trap focus, which allows the focus to move behind the slide down menu.
And I tried my hand at create pure CSS navigations.
Note: I did not implement animation, as these are just proof of concepts.
Toggle Menu with Autofocus
An improvement - I hope - upon Apple's solution, by implementing autoffocus.
To avoid focus from going behind the menu, I shift the content below the menu when it is opened. So focus is not trapped, but still quite accessible.
Is there truly no way to trap the focus?
Toggle Menu with Focus Trapping
Without the ill-fated
nav-index property, how do we trap the focus within the menu?
My solution is, remove the content with
Now I tried something else - an auto-expanding menu that opens up as soon as header receives keyboard focus.
A "skip to content" link is added for usability.
No need for anchor links, it's automatic!
A twist on the auto-expanding menu, instead of overlaying and obscuring the content, the menu is inserted between header and content within the document flow.
I remember reading articles about having hidden menu items causing users to not visit them, so here's a solution for it - the Pullup Menu.
The menu is visible at all times, normally sits above the footer so you can choose what to do once you finished reading the current page.
The menu button and keyboard focus within header will pulls up the menu from the bottom when pressed.
It could be a bit disorienting for keyboard user to unable to access the menu at the end of the page when it's visually present, but probably not hard to get used to.
So there it is, 5 different variations of fully accessible, CSS only mobile menu.
I might have overdone it, but it was fun.