A Pen by Mike Kormendy.

index.html

<ol>
  <li>Press the tab key to activate focus outlines.</li>
  <li>Click your mouse anywhere to disable focus outlines.</li>
</ol>
<a href="#1">BUTTON 1</a>
<a href="#2">BUTTON 2</a>
<a href="#3">BUTTON 3</a>

Keyboard-Activated-Accessibility.markdown

Keyboard Activated Accessibility

This test example attempts to hide accessible styles until they are needed. We provide accessible outline focus styles only when the user uses keyboard input. When the mouse is activated or clicks a link it deactivates accessible styles.

A Pen by Mike Kormendy on CodePen.

License.

script.js

this.onkeydown = function (e) {
  if (e.keyCode === 9) { // if Tab key was pressed
    console.log('tab pressed');
      $('body').addClass('keyfocus');
  }
};
$(document).on('mousedown', function(e) { 
    if (e.button == 0) {
        console.log('mouse clicked');
        $('body').removeClass('keyfocus');
    }
});

style.css

body{
  font-family: sans-serif;
  background: #fff;
  margin: 20px;
}
a {
  margin: 20px;
}
a:focus,
a:active {
   outline: none;
}
.keyfocus a:focus,
.keyfocus a:active{
   outline: 1px solid #f00;
}