Выбор ответа Junior Доступность обновлено
Зачем :focus-visible
Вопрос
Дизайнеру не нравится обводка у кнопок после клика мышью. Как сохранить доступность и убрать её при клике?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Стилизовать фокус через :focus-visible: он виден при навигации клавиатурой. :focus-visible срабатывает, когда браузер считает, что фокус нужно показать, в первую очередь при навигации клавиатурой.
Варианты ответа
- Стилизовать фокус через
:focus-visible: он виден при навигации клавиатуройправильный ответ - Написать
button:focus { outline: none; }и оставить обводку только при наведении - Написать
* { outline: none; }и добавить кнопкамtabindex="-1" - Заменить кнопки на
divс обработчиком клика: у них нет обводки фокуса
Разбор
:focus-visible срабатывает, когда браузер считает, что фокус нужно показать, в первую очередь при навигации клавиатурой. Убирать outline у :focus без замены нельзя: пользователь клавиатуры перестанет видеть, где он. tabindex="-1" выкинет кнопки из порядка Tab. Div без фокуса это потеря доступности, а не решение.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.