VPenkov / okayNav

The world's okayest responsive navigation. This is (sort of) a legacy implementation. Please stay tuned to the 3.0 branch (https://github.com/VPenkov/okayNav/tree/v3.0)
4.02k stars 267 forks source link

Keyboard accessibility #39

Open powrsurg opened 8 years ago

powrsurg commented 8 years ago

As someone that does accessibility testing quite often, I found the module to have a few issues:

  1. A user can tab to the hidden items with their keyboard, even if they're not visible. A user should not be able to tab to an item that is not visible.
  2. Tabbing to the ellipsis should occur before the navigation items to expand collapse.
  3. Missing keyboard functions (and ARIA attributes) for the Menubar role.

The first issue can be fixed by applying a tabindex="-1" to hidden links, and change them to tabindex="0" when they are exposed.

The second issue is simply an issue with reordering the item.

The third issue can be fixed by following the rules defined in this example: http://oaa-accessibility.org/example/25/

VPenkov commented 8 years ago

That's some great feedback. Highly appreciated. I recently got hired on a new job so I'll get right back to okayNav once I get ahold of things there, possibly even this week.