Используйте псевдо-класс :focus наравне с :hover

Версия для печати

Вероятно одной из самых частых ошибок обеспечения доступности в CSS является пренебрежение псевдо-классом :focus при использовании :hover. Сколько же проблем приносит такое пренебрежение пользователям, не использующим мышь?

1. Визуальные неудобства

Когда состояние :hover имеет некий стиль, например, изменен цвет текста, игнорирование такого же стиля для состояния :focus редко становится причиной серьёзных проблем доступности. В том случае если свойство outline у ссылок, которые могут принять фокус,  не обнулено, то пользователи, использующие для навигации по сайту только клавиатуру всё ещё смогут получить визуальный ответ при переключении фокуса.

2. Серьёзная проблема доступности

Проблемы возникают, когда свойство outline у ссылок отключено. В этом случае при изменении фокуса пользователь не видит никакого визуального подтверждения своих действий. Эта проблема становится всё более распространенной, так как некоторые популярные CSS-фреймворки обнуляют свойство outline.

Технически ссылки остаются доступными, однако, единственным подтверждением действий пользователя остаётся лишь изменение адреса в строке статуса (и то не во всех браузерах).

3. Полная недоступность

Также при верстке существуют методы, создающие большие проблемы, так как они делают содержимое недоступным для пользователей, использующих только клавиатуру. Это возникает, когда :hover применяется к элементам, которые не могут получить фокус клавиатуры, или когда :hover используется для появления элементов сайта. Многие из выпадающих CSS-меню классический пример таких ошибок.

Focus on :focus (and :active)

Часто очень легко устранить эти проблемы, просто применив одинаковый стиль для обоих состояния :hover и :focus. Вы также можете использовать состояние :active, чтобы угодить пользователям браузера Internet Explorer 7 и его более ранних версий, так как IE 8 — первая версия Internet Explorer, поддерживающая состояние :focus.