Вероятно одной из самых частых ошибок обеспечения доступности в 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.
Комментарии
Я считаю, что статья по большей своей части не совсем верно раскрывает суть этих псевдо-классов.
Вообще я думаю, что использование этоо класса приминимо и оправдано только для случаев для мобильных устройств например.
Автор сам хоть раз-то видел человека, у которого есть компьютер, операционная система Виндоус и нет мышки, и при этом он активно использует интернет?
Читаем спецификацию W3C:
В CSS вводится понятие псевдо-элементов и псевдо-классов как способа манипуляций над свойствами отдельных HTML-элементов, основываясь на информации, находящейся вне дерева HTML-документа.
Именно в этом и заключается смысл использования псевдо-классов, а одновременное использование псевдо-классов
:hoverи:focusпозволяет при небольших временных затратах дать возможность пользователям удобно взаимодействовать с сайтом. Это может пригодится и для подсветки полей форм при наведении и перемещении фокуса мыши. Многие уверенные пользователи перемещают фокус с помощью клавиатуры, особенно при заполнении HTML-форм. Поэтому не надо недооценивать ценность совместного применения этих псевдо-классов.