Building A More Accessible And Simpler “Hamburger” Menu
— edit 8 Jan 2022, iOS bug fixed. See “MAJOR BUG” below.
There are so many ways of creating “mobile friendly” menus. Some of them are utter trash — like the endless stream of JavaScript only solutions. Others can have corner case accessibility issues such as the “checkbox:checked ~” approach not exactly being as keyboard friendly as would be desirable.
There is a technique I’ve been playing with — using the focus state of a button — that shows promise, but before even I dig into playing with it, it helps to build a laundry list of what we WANT it to do, and what we can do to accomplish that. As I’m just starting to play with this one, I figured I’d invite you folks along for the ride as I lay out my thoughts.
Also another opportunity to show what utter garbage the markup most people are vomiting up these days is. What with all the presentational classes and endless pointless DIV and SPAN for nothing that are hot and trendy thanks to the asinine ignorant trash known as “frameworks”.
NOTE, the initial version of this article tried to use :active instead of :focus. Big mistake as in the full version the popup can break the active state.
What We Want It To Do
- First and foremost basic functionality should NOT rely…
