Использование правила :focus { outline: none; } (отсутствие обводки у элемента в фокусе) для удаления обводки приводит к тому, что ссылка или элемент управления будет активным, но этого не будет видно пользователям, использующим клавиатуру. Способы избегания фокуса, такие как onfocus="blur()" (при получении события фокуса запустить функцию сбросить фокус), еще хуже, так как приводят к тому, что пользователи, использующие клавиатуру, вообще не смогут взаимодействовать со ссылкой или элементом управления.

Если вам не нравится обводка по умолчанию у элемента в фокусе, которая отображается, когда пользователь нажимает на элемент, с которым можно взаимодействовать, у вас есть как минимум 3 решения, которые не нарушают удобство пользователей:

1. Задайте стили обводки. У браузеров на движке Webkit свечение у элементов в фокусе более заметное, так что можно задать свои стили, чтобы сделать его не таким навязчивым. Возможно, хорошей идей будет использование правила a:focus { outline: thin dotted; } (у ссылок в фокусе обводка тонкая и точечная ), чтобы во всех браузеров у ссылок была одинаковая обводка.

2.  Задайте стили самому элементу. Можно удалить обводку, если у элемента в фокусе есть свой особый внешний вид, например, заданный с помощью свойств цвета текста или фона, рамки или подчеркивания текста ссылки.

3. Если вам очень нужно, можно удалить обводку только для пользователей мыши. Для начала не задавайте правило отсутствия обводки в коде CSS. При обнаружении событий мыши, задайте это правило с помощью JavaScript. И удалите это правило, если обнаружено событие клавиатуры. Вот два примера скриптов, удаляющих обводку и не нарушающих при этом удобство пользователей:

• outliner.js, независящее от библиотеки исполнение с передачей события, созданный Aireh Glazer.
• outline.js, похожий подход, использующий событие mousedown (нажатие кнопки мыши) вместо события mouseover (наведение указателя мыши), созданный Lindsay Evans.
• What Input? (Какой способ ввода?) отличается от двух предыдущих, так как добавляет атрибут тегу body, позволяющий использовать код CSS, который будет применяться, только если пользователь использует клавиатуру для навигации по сайту.

Используйте третий способ только в крайнем случае. При совместном использовании некоторых браузеров и некоторых программ, читающих текст с экрана, может происходить срабатывание события мыши, что приведет к исчезновении обводок при использовании такого подхода.

В завершение добавим, что использование правила отсутствия обводки без подходящих обходных путей сделает Ваш сайт гораздо менее удобным для пользователей, использующих только клавиатуру, не только тем, у кого плохое зрение. Убедитесь, что у элементов, предусматривающих взаимодействие, всегда есть видимое обозначение состояния фокуса.

Материалы для дополнительного чтения:

• Проблема с использованием свойства outline:0

• Рекомендации по доступности веб-содержимого для пользователей 2.0 (2.4.7)

• Пример неудачи веб-сайта из-за применения стилей для обводки и рамок, которые удаляют или делают невидимым визуальное обозначение состояния фокуса

Автор урока Guilherme Simões

Перевод — Дежурка

Смотрите также:

• Фоны, изменяющие положение в зависимости от движения указателя
• Использование свойства CSS изменения размера
• Использование нового способа центрирования