@TheCrossCarrier

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

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

  1. Как правильно с точки зрения accessibility (доступности) поступать с outline элементов управления ( теги a, button... ) ?
    Слышал, что лучше оставлять по умолчанию обводку, чтобы те, кто переключаются по клавише Tab могли видеть, что выбрано в данный момент.


  2. Если оставлять выделение outline, то с тегом a всё прекрасно -- по табу она выделяется обводкой, по клику -- нет.
    Но с button уже появляются проблемы -- при стилизации кнопки часто у button мы убираем border и появляется проблема: когда у button нет border, при клике по нему появляется outline, при чём после клика outline не пропадает!
    Для наглядности набросал пример: JsFiddle


    Как решить данную проблему? (Сделать поведение outline элемента button таким же, как у тега a)


    Отключив outline на button, он не будет выделяться при переключении по табу, если оставлю -- будет проблема при клике, при чём не очень приятно это выглядит на круглых кнопках: квадратный outline на круглой кнопке... (в примере именно так)



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

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Все проблемы выдуманные.
С точки зрения доступности, вы можете делать всё что угодно с outline, но вы должны выделять любым способом состояния :focus и :active
Отсюда же решение и второй проблемы с кнопками — не забывайте задавать им стили для этих состояний.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы