back to how to remove CSS outlines in an accessible manner?

kill outline for mouse users only: test page

1. Click on the links while viewing the page in your favourite browser
2. You should not see the focus outline
3. navigate the links using you favourite browser
4. you should see the focus outline

The accessibility issues with use of CSS outline:none have been widely documented:

• Don't Lose Your:focus
• keyboard friendly link focus
• Do not remove the outline from links and form controls
• Keyboard accessibility (again)
• The plague of outline:0
• Focus on keyboard users
• It even has its own web site outlinenone.com

The WHATWG Living Standard claims it provides advice on how to remove focus outlines in an 'accessible manner':

The W3C HTML specification omits some advice about how to remove focus outlines in an accessible manner (instead only urging authors not to remove them without giving an alternative to address the "they're ugly" use case), because of a working group chair decision from March 2012.

The WHATWG HTML living standard contains the following advice:

element . blur()

Unfocuses the element. Use of this method is discouraged. Focus another element instead.

Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead, use a CSS rule to override the 'outline' property. (Be aware, however, that this makes the page significantly less usable for some people, especially those with reduced vision who use focus outlines to help them navigate the page.)

For example, to hide the outline from links, you could use:

:link:focus, :visited:focus { outline: none; }

The WHATWG HTML living standard does not contain advice on how to remove focus outlines in an 'accessible manner'

By its own admission the 'living standard' states the recommended alternative to using .blur() is bad for accessibility:

Be aware, however, that this makes the page significantly less usable for some people, especially those with reduced vision who use focus outlines to help them navigate the page.

Note: This warning also contains a factual inaccuracy as it makes the page significantly less accessible to any keyboard only user not only those with reduced vision. Not providing a visible indication of focus makes it unusable for keyboard only users in any page that contains more than a few interactive elements.