Remove blue outline on links when clicking, but keep the outline for TAB selection (accessibility)

Question

I have a Burger Menu Button which is selectable via TAB. When I click on it and the menu opens up the burger has this blue outline to make it clear that it is focused. I don't want to remove that blue outline, because it helps vision impaired people and for tab selection it is also great, but is there a smart way to remove the blue outline only when someone clicks on it via mouse. Just asthetics...

Thanks for your answer.

cheers

Oarsman

The best solution for this problem is from guys from Facebook, see #31403076 – Carthusian

By the way, I solved it with this package: github.com/ten1seven/what-input If the input source is the keyboard (=tab) I can style things differently compared to input === mouse. Cheers – Oarsman

Answer 1

As you pointed out, the blue outline is here for accessibility reasons.

If you click on the element, the keyboard focus will also move to that element.

So users have to know that the keyboard focus has been moved to that element.

Some people with disabilities may want to jump to a particular tab using the mouse, but then use their keyboard for easiness reasons.

Ventriculus

Answer 2

js:

$('#element').click(function(){
   $(this).addClass('mouse');
});
$('#element').blur(function(){
  if($(this).hasClass('mouse'){
     $(this).removeClass('mouse');
  }
});

css:

.mouse{
  outline: none;
}

Biceps

Doesn't the jquery click function include keyboard clicks as well? If so, mousedown/up might be better than click/blur. – Outbid

Answer 3

If I understood correctly the question, try:

.myButton:active {outline: none;}

Lenes

But this would remove the outline when the user tabs to it too right? Which is not the desired behaviour. – Somite

Answer 4

Here's a simple solution, in plain Javascript, that works back to IE 10.

This answer is similar to @kuba's answer. Add/remove a class using JS to detect a mouse click or a tab button press.

javascript:

var htmlElement = document.querySelector('html');

document.addEventListener('click', function(){
  htmlElement.classList.add('clicking');
});

document.addEventListener('keyup', function(e){
  if (e.keyCode === 9) {
    htmlElement.classList.remove('clicking');
  }
});

Then turn off outline on :focus when the clicking class exists

CSS:

html.clicking .targetElement:focus {
   outline: none;
}

/* 
  or you can try dealing with all visibly focusable elements from the start.  I'm not sure if this is all of them, but it's good starting point.
*/

html.clicking a:focus,
html.clicking button:focus,
html.clicking input:focus,
html.clicking textarea:focus {
  outline: none;
}

Browser Compatibility:

querySelector IE 8+
element.classList IE 10+

jQuery alternative if you need to support browsers older than IE10.

$(document).on('click', function(){
  $('html').addClass('clicking');
});

$(document).on('keyup', function(){
  if (e.keyCode === 9) {
    $('html').removeClass('clicking');
  }
});

Gewgaw

Answer 5

I had this issue when using an SVG as a button (for a star rating system). The solution I found is to use a wrapper div around whatever object is getting this focus outline.

Put the button logic (onclick/onkeyup) in the wrapper div, and the outline will not show up on a click, but it will still allow a user to tab to it.

Gonsalve

Answer 6

Well you may want to do it this way:

div:active, div:focus{
  outline: none;
  border: none;
}

and maybe:

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Taggart

you're offering the exact opposite to the solution he's asking for – Knighthood

Oh, isn't his question "is there a smart way to remove the blue outline only when someone clicks on it via mouse" ? – Taggart

No. His question is when to remove while leaving the outline for the tabs. If you remove the outline with the :active it will also remove it when ... active, on tab :p – Knighthood