Tabindex Focus Styles

Question

I have made a div tabbable with the tabindex attribute to make hidden content accessible.

Currently when clicked with the mouse the div gets browser :focus styling.

Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.

• Div with tabindex='0' gets browser focus styles on mouse and keyboard interaction
• Anchor gets browser focus styles on keyboard interaction only

I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.

Any help would be great, I'm genuinely at a loss.

Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/

Answer 1

Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.

div:focus {outline: blue solid 2px;}

Kub suggested a JS solution, but why use js if you don't actually need to?

Answer 2

I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.

document.addEventListener("mousedown", () => {
  document.body.classList.add("using-mouse")
  document.body.classList.remove("using-keyboard")
})

document.addEventListener("keydown", () => {
  document.body.classList.add("using-keyboard")
  document.body.classList.remove("using-mouse")
})

The in the css you can do something like:

.using-mouse :focus {
  outline: none;
}

.using-keyboard :focus {
  outline: auto 5px blue;
}

Answer 3

I would suggest to don't be specific on tags like div, p, span

let's write one common selector to achieve this functionality for all the elements.

*:focus {
   outline: blue solid 2px;
}

If you want to be specific then I would suggest this one.

*[tabindex]:focus {
    outline: 2px green solid;
}