Показываем фокус клавиатуры

Данный материал является переводом статьи «Visible Keyboard Focus» от Jason Kiss.

В сообществе по вопросам доступности хорошо понимают, что показ фокуса — это критически важный шаг в обеспечении доступности
для зрячих пользователей, которые полагаются на клавиатуру при работе в веб. Такую рекомендацию можно встретить читая
WCAG 2.0: «при любых действиях пользователя, произведенных с помощью клавиатуры, индикатор положения фокуса клавиатуры должен быть виден». Это же самое повторялось разными людьми на протяжении нескольких лет. Например, Mike Cherim поднимал этот вопрос в 2007. Jared Smith — в 2008. И Roger Johansson снова в 2009. И сообщество продолжает на эту тему твитить даже сейчас. Иногда встречаются мнения, что смысла в видимости курсора нет. Другие же, просто напоминают своим фоловерам о хорошей практике. В последнее время, кажется, твитов вокруг этой темы стало больше, чем обычно.

Не смотря на все это, делать видимым фокус клавиатуры — все еще не настолько распространенная практика, как нужно бы быть. По крайней мере один из тормозящих факторов — это устранение прямоугольника из точек вокруг ссылок при получении фокуса. Это решение поддерживаются дизайнерами, без замены каким-либо другим видом индикации получения фокуса. Ради интереса можешь попробовать загуглить фразу «ugly dotted border» или «annoying dotted border». Недавно встретился следующий комментарий в файле CSS, предшествующий декларации, которая удаляла прямоугольник при фокусе для основной навигации сайта: «удаляем надоедливые границы на навигационных элементах».

Я вовсе не дизайнер, но я понимаю, что вид прямоугольника при фокусе по умолчанию может нарушить эстетическую красоту визуального дизайна. Но в тоже время, этот прямоугольник имеет важную ценность и без него, либо эквивалентной замены, для определенных пользователей доступность сайта заметно пострадает. Jared писал, что в популярном ныне reset.css используется правило
outline: none или outline: 0 для псевдоклассов :focus. Конечно, использование reset.css само по себе не является проблемой, в отличии от пренебрежения замены устраненных рамок для фокуса.

Но стоит отметить, что в последнее время появились позитивные сдвиги в этом направлении, которые запустили HTML5 Reset from Monkey Do и the HTML5 Boilerplate от Paul Irish и Divya Manian. HTML5 Reset добавляет рамку фокуса, используя по умолчанию :focus {outline: 1;}, а HTML5 Boilerplate использует пару правил из работы Patrick Lauke, где тоже сохраняется дефолтный визуальнй индикатор фокуса для обеспечения доступности при работе на клавиатуре, учитывая вопросы связанные с outline на ссылках-изображениях с замещенным текстом.

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

a:hover, a:focus, a:active {
   background-color: #ff9;
}

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

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

Если на твоих страницах подключен Javascript, который используется для создания эффектов при событиях mouseover и mouseout, их нужно продублировать аппаратно-зависимыми эквивалентами — focus и blur соответственно. По этому поводу совет от James Edvards.

Казалось бы такая незначительная «мелочь», а в итоге может оказаться важной для многих людей и произвести на них положительное (в случаях пренебрежения — отрицательное) впечатление. К счастью, данную рекомендацию несложно реализовать.

Немного от редакции

Кому это надо:

• людям с ограниченными возможностями: есть ряд болезней, которые не позволяют выполнять точные движения или вообще движения руками;
• привыкшим работать на клаве (сходу вспоминаются линуксоиды-любители консолей);
• для устройств, распознающие жесты;
• использующих джойстики;
• просто для тех у кого в данный момент мышь недоступна;
• для обладателей мобильных устройств, не имеющих сенсорных экранов (тачскринов).

К каким элементам нужно применять:

• ссылки;
• карты изображений;
• элементы форм;
• активные элементы — клик на которых должен приводить к каким-либо действиям;
• к элементам object;
• к элементам video и audio из HTML5.

То есть, пользователь, использующий клавиатуру, должен быть способен выполнить все действия с сайтом.