От автора: недавно вышло несколько статей и рекомендаций о том, как использовать :focus-visible для отображения стилей CSS focus, когда кто-то использует клавиатуру, но игнорировать их, когда пользователь взаимодействует с помощью мыши.
Лучшее, что я видел до сих пор, пост Леи Веру: Я собираюсь начать общее добавление следующего правила ко всем таблицам стилей:
:focus:not(:focus-visible) { outline: none }Это избавляет от раздражающего контура для пользователей мыши, но сохраняет его для пользователей клавиатуры и игнорирует браузеры, которые не поддерживают :focus-visible.
Общее мнение всегда одинаково: кольца фокусировки (контуры вокруг ссылок, кнопок и других фокусируемых элементов) отстой, и мы включаем их только потому, что они нужны пользователям клавиатуры. Чушь собачья.
Стили фокуса действительно потрясающие. У моего друга Эрика Бэйли есть отличная презентация по этому вопросу. Мне лично они нравятся по той же причине, что и стили :visited на страницах с интенсивным использованием ссылок.
Даже будучи пользователем мыши, полезно знать, что в данный момент выделено фокусом, потому что я иногда также использую свою клавиатуру , часто взаимозаменяемо с мышью. Я могу быть не репрезентативным примером, но знаете ли вы, как каждый из пользователей просматривает ваши сайты и приложения?
Мы продолжаем совершать одну и ту же ошибку — предполагая, что знаем, как наши пользователи хотят использовать то, что мы создаем, или что они такие же, как мы — снова и снова.
Кроме того, стили фокусировки не должны быть безобразными. Я думаю, что настройки по умолчанию отлично подходят, но вы можете делать все что угодно, чтобы они выглядели по-другому.
Моя точка зрения: просто включите стили фокуса. Для всего выделенного фокусом. Для всего.
Источник: https://gomakethings.com/
Редакция: Команда webformyself.