CODEWITHSUNDEEP
htmlcssaccessibility
Henry Hoffman
Henry Hoffman

Reputation: 219

Tabindex Focus Styles

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.

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/

Upvotes: 12

Views: 28841

Answers (6)

user13028588
user13028588

Reputation:

For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if

:focus {
    outline: 2px solid lime;
}

is used it will show outline on every element that is getting focus, but I found out that if I use

Change Tabindex Style - for all elements:

 :focus-visible {
    outline: 2px solid lime;
}

this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Upvotes: 0

Gadmer
Gadmer

Reputation: 71

I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.

The way I implemented it is like this:

.your-element's-classname:focus:not(:focus-visible) {  outline: none; }

When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.

You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.

Upvotes: 0

James Kerr
James Kerr

Reputation: 326

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;
}

Upvotes: 4

Hidayt Rahman
Hidayt Rahman

Reputation: 2680

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;
}

Upvotes: 1

Ryan B
Ryan B

Reputation: 3392

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?

Upvotes: 8

kubedan
kubedan

Reputation: 626

If you can use javascript, try use onclick attribute.

onclick="this.blur()" for lost focus

onclick="this.focus()" for set focus

Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/

Disadvantage is visible focus style if you hold mouse key for a longer time.

Upvotes: -1

Related Questions