Что делать с outline кнопок без border?

Question

[Даниил]

Несколько моментов:

1. 
   Как правильно с точки зрения accessibility (доступности) поступать с outline элементов управления ( теги a, button... ) ?
   Слышал, что лучше оставлять по умолчанию обводку, чтобы те, кто переключаются по клавише Tab могли видеть, что выбрано в данный момент.
   
   
2. 
   Если оставлять выделение outline, то с тегом a всё прекрасно -- по табу она выделяется обводкой, по клику -- нет.
   Но с button уже появляются проблемы -- при стилизации кнопки часто у button мы убираем border и появляется проблема: когда у button нет border, при клике по нему появляется outline, при чём после клика outline не пропадает!
   Для наглядности набросал пример: JsFiddle
   
   
   Как решить данную проблему? (Сделать поведение outline элемента button таким же, как у тега a)
   
   
   Отключив outline на button, он не будет выделяться при переключении по табу, если оставлю -- будет проблема при клике, при чём не очень приятно это выглядит на круглых кнопках: квадратный outline на круглой кнопке... (в примере именно так)
   
   

Спасибо всем откликнувшимся!

Answer 1

[Вадим]

По порядку:
1) Не совсем верно. Не рекомендуют оставлять дефолтный аутлайн. Рекомендуют менять стиль элемента, когда он в фокусе, чтобы пользователю было удобнее осуществлять навигацию и ориентироваться какой элемент в данный момент активный. И оставлять дефолтный аутлайн если Вы не хотите с этим заморачиваться.

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.

Comments

[Даниил]

А Вы как всегда меня выручаете))) Спасибо!

Answer 2

[Сергей delphinpro]

Все проблемы выдуманные.
С точки зрения доступности, вы можете делать всё что угодно с outline, но вы должны выделять любым способом состояния :focus и :active
Отсюда же решение и второй проблемы с кнопками — не забывайте задавать им стили для этих состояний.