Skip Navigation Problem with Tabbing

I am having an issue with my skip navigation code. I am able to get the skip navigation to work, but only after I have tabbed through 13 form elements does the skip to main content link show up. Can anyone help me?

1 Like

Not without seeing any code.

This is what I have in my css:

.skipNAVIGATION {
    margin:0;
    padding: 0;
}

.skipNAVIGATION:focus, a.skipNAVIGATION:active {
	position: absolute;
    top: -3em;}

This is what I have in my html:

<body>
    <div class="wrapper" id="wrapper">
    <div id="skipNAVIGATION" class="skipNAVIGATION">
        <a href="#tblMainPage" id="skpnav">Skip to Main Content</a>
    </div>

   <div id="tblMainPage" role="main">

Where’s its tabindex ?

I’ve tried adding tabindex=-1 and tabindex=0 to the Skip to Main Content link and also to the div for tblMainPage. These do not seem to work. The Skip to Main Content will show up but after it has gone through the form elements.

Sounds like those were working as they should have as explained in the page I linked to. Give it a quick read.

But I’ll still point out the obvious.

Your div is not focusable (divs simply aren’t). But your skip link itself, is. Because it’s an anchor, and anchors are focusable.

<a href="#tblMainPage" id="skpnav">Skip to Main Content</a>

You gave your skip link an id, good.

So now look at your CSS.

.skipNAVIGATION:focus, a.skipNAVIGATION:active {

What does that CSS say? It says “when the element with class skipNAVIGATION gets focus…”
That element is a div, it doesn’t get focus.
The other part says “When the anchor with the class skipNAVIGATION is active…”
But your anchor doesn’t have any such class. The div does, but again divs don’t get :active.

Your CSS should style and talk about the anchor alone, because it’s the anchor who’s focusable and activable. Is that a word? Style the anchor, not the div.

Now you don’t need to mess with tab index or any of that junk.

If you want to see a working example, look at the code on fonq.be. The skip links are in a UL with the id of “skippy”.

3 Likes

Thanks for that explanation! Any insight is appreciated! I’ll check out the fonq.be code.

fonq.be does make use of the anchor but it does use the tabindex for the main content:

<div id="container">


<ul id="skippie">
	<li><a href="#main">direct naar inhoud</a></li>
	<li><a href="#footer">bedrijfsinformatie en klantenservice</a></li>
</ul>
...
<div class="content">
	

	<div class="col_1-1" id="main" role="main" tabindex="-1">

I have tried to do something similar, but to no avail. I’m still trying to make it work…

The tabindex thing is to fix a bug in webkit, blink (blink inherited this bug from webkit) and a separate bug in IE.

These bugs mean that while the browser should move keyboard focus to the skip link destination, in those browsers it doesn’t, only visual focus.

These bugs have been in the tracking lists for years. Anyway, adding a negative tabindex to the destination is the workaround.

Notice it’s a negative tabindex. People tabbing through the page will not tab on the main div.

For Blink browsers you might want to add #main:focus {outline: 0} or something-- this is probably the only time it’s good to remove the focus outline, since we’re only focusing on a non-focusable purely to fix a bug.

Maybe it was this bug you were running into earlier? Firefox for example does not have this bug, so when building, test your skip links in Firefox. After clicking the skip link, your next TAB should be moving from the destination element you were moved to. This is how all browsers should work, so with Blink browsers (chromium, chrome, opera 15+) and sometimes IE, those are actual bugs.

edit here’s the Blink bug https://code.google.com/p/chromium/issues/detail?id=262171
and more about IE’s (there were 2 bugs in IE-- one had to do with HasLayout, which isn’t an issue in IE8+ in Standards Mode, but the other one still persists) https://accessibility.oit.ncsu.edu/blog/2014/05/02/skip-links-shouldnt-be-this-hard/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.