От автора: одна из наиболее важных функций веб-сайта, созданного с учетом специальных возможностей — это возможность перемещаться по нему с помощью клавиатуры. Большинство слепых пользователей и многие пользователи с ограниченными двигательными возможностями полагаются на навигацию с помощью клавиатуры, будь то стандартная клавиатура или устройство, имитирующее функционал клавиатуры. Поэтому необходимо обеспечить четкие визуальные индикаторы, выделяющие элемент, который в настоящее время выделен фокусом с клавиатуры.
В CSS стили фокуса для элемента можно изменить с помощью псевдо-класса :focus.
a:focus { outline: 3px solid blue;
}Скрытие стилей фокуса — плохая практика
Однако, помимо требований доступности, необходимо также учитывать дизайн: для некоторых пользователей слишком явный визуальный индикатор фокуса, когда они кликают элемент мышью или касаются его пальцем, может раздражать или казаться «неуклюжим». Часто выделение фокуса видно только на короткое время, непосредственно перед тем, как происходит изменение страницы. Это дополнительное визуальное изменение интерфейса, которое пользователи должны обработать и понять. Не зная, что выделение вокруг элемента на самом деле является функцией доступности, люди могут отвлекаться или раздражаться. Иногда это даже воспринимается как ошибка. И хотя некоторые дизайнеры, безусловно, гораздо более чувствительны к эстетическим качествам интерфейса, чем его пользователи — и им было бы целесообразно привыкнуть к немного более ориентированному на доступность, контрастному дизайну.
Поэтому многие клиенты и дизайнеры настаивают на том, чтобы разработчики полностью удалили стили фокуса по чисто эстетическим причинам.
a:focus { outline: none;
}Не делай этого. Это неосведомленное решение, которое активно исключает людей и больше не должно быть приемлемым решением в 2020 году. Мы должны работать лучше. Но как?
Один из выходов из этой дилеммы — сознательно спроектировать состояние фокуса элемента так, чтобы оно воспринималось как естественная часть перехода от одного состояния интерфейса к другому. Однако это не всегда просто или возможно.
:focus-visible приходит на помощь
К счастью, теперь есть еще один вариант — псевдо-класс :focus-visible. Согласно спецификации, «цель: focus-visible состоит в том, чтобы позволить авторам предоставлять четко идентифицируемые стили фокуса, которые видны, когда пользователю, вероятно, необходимо понять, где находится фокус, и невидимы в других случаях». Или, другими словами, он позволяет отображать стили фокуса только тогда, когда они необходимы, используя ту же эвристику, которую использует браузер, чтобы решить, показывать ли индикатор фокуса по умолчанию:
/* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
:focus:not(:focus-visible) { outline: 0;
} /* Show focus styles on keyboard focus. */
:focus-visible { outline: 3px solid blue;
}Chrome 86 полностью поддерживает :focus-visible, Firefox поддерживает его с помощью псевдо-класса :-moz-focusring с 2011 года и Mozilla в настоящее время работает над поддержкой :focus-visible тоже. Так что вы можете начать использовать его прямо сейчас. И опять же, прогрессивное улучшение — также вам поможет. Вы можете определить обычные стили фокуса для не поддерживающих браузеров, а затем переписать их для браузеров, которые поддерживают :focus-visible.
:focus { outline: 3px solid blue;
} :focus:not(:focus-visible) { outline: 0;
} :focus-visible { outline: 3px solid blue;
}Вы можете попробовать этот Codepen:
Обратите внимание, что :focus-visible всегда применяется в сочетании с :focus. Поэтому, если вы проверяете его, например, в инструментах разработчика Chrome, обязательно отметьте оба поля, чтобы увидеть соответствующие стили фокуса.
Полифилл для старых браузеров
Если вам нужно поддерживать более широкий спектр браузеров, включая Safari, есть также полифилл. Он просто добавляет класс focus-visible ко всем выделенным фокусом элементам в ситуациях, соответствующих псевдо-селектору :focus-visible.
После того, как скрипт добавлен на страницу, код будет очень похож на приведенный выше пример. Единственная разница в том, что теперь мы используем классы для определения видимых стилей фокуса в CSS:
.js-focus-visible :focus:not(.focus-visible) { outline: none;
} .js-focus-visible .focus-visible { outline: 3px solid blue;
}Если вы решили использовать полифил, обязательно обратите внимание на то, как он ведет себя в сочетании с существующими стилями фокуса. По-прежнему может быть правильным решением использовать только полифил до тех пор, пока Safari не добавит поддержку :focus-visible. Но независимо от того, какой метод вы решите использовать, прекрасно, что теперь у нас есть решение проблемы, которую разработчики и дизайнеры часто «исправляли», делая веб-сайты менее доступными. :focus-visible теперь предлагает решение, которое доступно и радует пользователей, дизайнеров и разработчиков.
Автор: Matthias Ott
Источник: matthiasott.com
Редакция: Команда webformyself.