Visibility transition for keyboard accessibility

[samikeijonen]

For accessibility keyboard navigation using Tab, Shift + Tab and Enter is important. Responsive Nav handles this well. But I have been wondering small little detail.

User can tab trough the menu items even if the menu is closed and might get lost. This is because menu items get focused even if menu is closed. In other words keyboard user should access menu items only when user opens the menu.

One solution for this would be adding visibility transition JS and CSS.

JS:

transition = "max-height " + opts.transition + "ms, visibility " + opts.transition +  "ms linear";

CSS:

  .js .nav-collapse {
    visibility: hidden;
  }
  .js .nav-collapse.opened {
    visibility: visible;
  }

I usually see this done by using display: none and display: block but I have not found a way to keep transition when using that.

When using visibility rule you still keep the transition and menu items get focused only when you open the menu.

[flepp]

Hi,

Visibility isn't an animatable property, so you'd have to add opacity for the desired effect. You can use visibility for the transparency to click/hover statuses and opacity to reveal it progressively.

[samikeijonen]

I'm not sure what you mean by visibility is not animatable property, it is if you ask me:)

https://developer.mozilla.org/en/docs/Web/CSS/visibility

Here is demo (my own multi-level branch) where you can see what I mean.

1. Use only keyboard navigation using Tab, Shift + Tab and Enter.
2. On narrow screens you can't access (get focused) the menu items unless you open the menu.
3. When you open the menu animation effect is still there and you can focus on menu items.

[flepp]

Hey,

Well your menu works fine, but the only transition I see is the one applied to max-height, when clicking on the "open menu" button. Other than that, there are no transitions applied when showing the sub items.

Just to be sure we're on the same page, I put a little Jsbin together.

http://jsbin.com/megiju/edit?html,css,js,output

[samikeijonen]

We are not quite on the same page. First, we need visibility: hidden/visible; CSS for better keyboard navigation. max-height transition would not work smoothly when closing the menu if we don't do any transition for visibility rule also.

So transition is basically just for max-height as it should be but using visibility so that it doesn't "kick in" too early and max-height transition works smoothly.

And I was not talking about sub menu items. They do not have transition at all because I don't how to calculate sub menu height. If you know how to do that it would be great!

And sub menus are using basic display: none/block which can't have transition.

[flepp]

My bad, I get it now (I'm terribly slow). I'll look into it!

Also, here is my site using the dropdown version of reponsive-nav.

http://philippetasch.github.io/portfolio/index.html

It's been a few months already, so I don't remember exactly to what extent I modified the css, but you can see there's a transition for the sub-menu as it slides down. There aren't any transitions when closed, though. Hope it can give insight as to how to implement it for your needs.

[samikeijonen]

Yes you can animate sub menus like that using bigger max-height value. I already tried that and use it also in couple of sites. But it's not perfect:)

I think the key is how we can calculate sub menu height using JS. And that should be done the all sub menus automatically. Now, there is a challenge!

[flepp]

Very true, but for now, and until an update comes, I'll stick with that, as my javascript skills are sub par ;)