1

I'm struggling with making a navigation keyboard-accessible, so that the user can Tab through the links. The problem is with popups that will be shown next to a menu item once it is focused or hovered. Here's a minimal working example:

a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}
<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>

In Firefox 45, when Focus is on "Edit" and its "(Help)" is visible, the next Tab will not focus anything, but the "(Help)" vanishes. The next Tab will then move to "Delete".

In Chrome 49, it's even worse. When focus is on "Edit", the next Tab will not focus anything, and in fact restart the navigation at the page's first link upon the next Tab.

Is there any way that I can make this work while retaining the general style and document structure?

Stefan Majewsky
  • 5,427
  • 2
  • 28
  • 51

3 Answers3

2

I just saw how they do stuff like this in the YAML CSS framework. They don't mess with display (or visibility, for that matter) and just move the element out of the viewport:

a.help {
    /* don't show help until explicitly triggered */
    position: relative;
    left: -32768px;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    left: 0;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    left: 0;
}
<h3>Actions</h3>
<ul>
    <li><a href="#">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#">Back</a></li>
</ul>
Stefan Majewsky
  • 5,427
  • 2
  • 28
  • 51
0

You can use negative tabindex attribute in order to move element out of Tab scope:

<h3>Actions</h3>
<ul>
    <li><a href="#" tabindex="1">Edit</a> <a tabindex="-1" href="#">(Help)</a></li>
    <li><a href="#" tabindex="2">Delete</a> <a tabindex="-1" href="#">(Help)</a></li>
    <li><a href="#" tabindex="3">Back</a></li>
</ul>

tabindex=-1

When tabindex is set to a negative integer like -1, it becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.

Read more about tabindex

Dmytro Holysh
  • 86
  • 6
-1

Use "tabindex" attribute:

a.help {
    /* don't show help until explicitly triggered */
    display: none;
}
li:hover + a.help, a:focus + a.help {
    /* show help button when user is about to interact with the original button */
    display: inline;
}
a.help:focus, a.help:hover, a.help:active {
    /* don't hide help button while user interacts with it */
    display: inline;
}
<h3>Actions</h3>
<ul>
    <li><a href="#" tabindex="1">Edit</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#" tabindex="2">Delete</a> <a class="help" href="#">(Help)</a></li>
    <li><a href="#" tabindex="3">Back</a></li>
</ul>
alexey
  • 783
  • 1
  • 7
  • 19