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

1
votes

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

1
jqueryhtmlcssaccessibility
Do you have a link to the page in question? If not, do you have a code example you can put up? - discojoe
On which browsers did you test? IE (which version?), Firefox, a webkit one, Opera? - FelipeAls
Windows 8 - Happens on Firefox, Chrome, IE11 and Opera and Safari have another issue where they just jump to the first input on the page when I hit tab... - Luke Watts

1 Answers

2
votes

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