CODEWITHSUNDEEP
jqueryhtmlcssaccessibility
sygad1
sygad1

Reputation: 1482

Accessibility skip nav menu changes visual focus, not tab focus - how do I fix this

I have an accessibility skip nav menu that uses named anchors to jump to content areas.

These content areas, (Top menu, left menu, main body content and footer menus), also have links inside.

When I tab into the skip nav menu, and click 1 of the links, it correctly moves the visual focus to the relevant content area.

However, if I tab again, it carries on tabbing through the remaining skip nav items.

I was expecting it to tab through the links within the content area i just "jumped" to.

I am not using tab index on any element at the moment

I am using HTML5 and wondered if I can programatically change the tab index to 1 for the element I just "jumped" to, in the hope that it will force the tabbing to start from a new position.

Is this bad for accessibility?

Cheers for any help or advice

Upvotes: 1

Views: 1194

Answers (1)

Simon Hudson
Simon Hudson

Reputation: 414

We came across this exact same issue recently and found two different browser bugs...

In IE, the element you want to jump to MUST have a width specified in order for the functionality to work.

http://webaim.org/techniques/skipnav/#iequirk

It also occurs in Webkit (Chrome/Safari), although AFAIK there is no fix for these browsers (happy to be corrected though if someone knows of one!)

http://code.google.com/p/chromium/issues/detail?id=37721

It's generally not a good idea to use tabindex, but instead try and structure the HTML logically so the tab order flows properly by itself

Upvotes: 2

Related Questions