What to do with button outline without border?

Question

css

A few points:

1. 
   What is the right way to deal with controls ( tags ... ) from the point of view of accessibility ? I've heard that it's better to leave the default stroke so that those who switch by key can see what is currently selected.outlinea, button
Tab
   
   
2. 
   If you leave the selection outline, then everything is fine with the tag a- by taboo it is highlighted with a stroke, by click - no.
   But buttonthere are already problems with - when styling a button, buttonwe often remove y borderand a problem arises: when it buttondoesn’t have border, when you click on it, it appears outline, and after clicking on it, it outlinedoesn’t disappear!
   For clarity, I sketched an example : JsFiddle
   
   How to solve this problem? (Make the outlineelement behave buttonthe same as the tag a)
   
   By disabling outlineonbutton, it will not be highlighted when switching by taboo, if I leave it - there will be a problem when clicking, and it doesn’t look very nice on round buttons: square outlineon a round button... (exactly like this in the example)
   
   

Thanks to all who responded!

Answer 1

In order:
1) Not quite right. It is not recommended to leave the default outline. It is recommended to change the style of an element when it is in focus, so that it is more convenient for the user to navigate and navigate which element is currently active. And leave the default outline if you don't want to bother with it.
2) There are different options. Here is a fresh one: https://matthiasott.com/notes/focus-visible-is-here - here you will find a modern solution and how to extend it to older browsers.

Answer 2

All problems are fictional.
In terms of accessibility, you can do whatever you want with the outline, but you must highlight the :focus and :active states in any way.
Hence the solution to the second problem with buttons - do not forget to style them for these states.