Continuing the discussion from Tab navigation on Drop-down menu:
This may be tricky, as I think it may be device specific, but someone may have a clue.
You can skip this waffle and go to The Problem.
The back story is in the previous thread. I was working on an experimental new menu system that would possibly replace my current, poorly accessible, old-school drop-down menu.
Actually, in the beginning it was just an experiment to see if I could make a responsive menu on a responsive page, with no media queries, in pure css with no scripting, just to see if I could do it, and it worked.
Later I was shocked to discover how inaccessible my current, live on-line, drop-down menu system was, hence the other thread. I then discover that this experimental menu is way more accessible and see it a possible solution to the problem.
Since first posing it and getting some feedback, I have made some more enhancements, notably, adding a couple of media queries. Back in the real world, I was never going to make an entire responsive site without any.
The first one was for big screens (desktops). I thought I would give those with plenty of screen space to spare a full-fat version of the menu with words and everything, rather than just the icons (with words on hover/focus).
Then the second query, was for small screens (phones) where I folded the icons into a hamburger until use, to give a bit more reading space where it is at a premium.
All appears to work well, testing in Firefox and Chrome all the way down to tiny wee iWatch size views. Then I actually try it on an actual phone. Unfortunately all I have to test it on is an oldish Windows Phone, OS version 7.8, not sure which IE that is though, it does not tell me. On that the hamburger is missing, meaning no menu at all. Actually there is a shadow of it, like it’s 1 or 0px high and still casting a box-shadow, but not clickable, see photo.
Reviewing the css, I can’t figure out why it’s displaying like that. It could be something peculiar to that IE version, whichever it is, one that does not support
position:fixed as a side note, but less of an issue.
So, any idea why this should be?
This is a version of it with the hamburger.
This alternative version does not go to hamburger, but keeps the icons on small screen, which does actually work I think.
I also welcome any feedback on usability and accessibility of the menu on a variety of devices and ATs.