От автора: в апреле Heather Migliorisi рассказывала про доступность плавной прокрутки. Давайте в этой связи рассмотрим вопрос фокус стилей на не интерактивных элементах.
Для плавной прокрутки необходимо:
проверить, чтобы кликнутая ссылка была #jump-ссылкой;
отключить стандартное поведение браузера с мгновенным перепрыгиванием на элемент на странице;
анимировать прокрутку до элемента, на который ссылается #jump-ссылка.
На втором этапе возникают проблемы с доступностью. #jump-ссылка больше не переводит фокус на указанный элемент. Поэтому Heather добавили пункт 4: перемещать фокус на элемент, указанный в #jump-ссылке.
Тем не менее, JS не умеет перемещать фокус на все элементы. Иногда необходимо принудительно дать фокус элементу, что она и сделала с помощью tabindex=”-1”.
Мы обновили наш код, чтобы он стал более доступным при смене фокуса. После этого довольно много людей начали нам писать про появившийся сторонний эффект:
Обратите внимание на светящийся синий контур вокруг заголовков, на которые прокручивается страница.
После плавного скрола у целевых заголовков появился стандартный светящийся синий контур, который есть у ссылок по умолчанию. Нам не всегда нравится синий светящийся контур (стили отличаются в зависимости от браузера, контур может быть пунктирным, например), поэтому мы его удалим.
По этой теме даже создали отдельный сайт:
Вы можете изменить фокус стили, если хотите, однако с точки зрения доступности лучше, чтобы фокус стили для элементов в фокусе отличались. Не могу представить, зачем нужно оставлять фокус стили.
Но но но
Заголовки – не фокусируемые элементы.
Это не интерактивные элементы. Мы не привыкли, чтобы фокус стили задавались на не интерактивные элементы. Однако сейчас мы нашли в интернете технику плавной прокрутки, и получили такие стили. Это сделал tabindex=»-1″.
Я написал Heather по этому поводу.
«Стили :focus для заголовков и других не интерактивных элементов можно удалить. Выбор стоит за разработчиками сайта, оставить их или нет. В некоторых случаях я сама удаляла такие стили, в других я их писала. Здесь все на ваше усмотрение.»
К моему удивлению я узнал, что можно удалять фокус стили с элементов, которые принудительно получили фокус и не являются интерактивными. Последнее предложение очень важно, и Heather поясняет: «Если заголовки представлены не в виде ссылок…;)»
Если вы ненавидите фокус стили, то можете сделать следующее:
|
1 2 3 4 5 6 7 8 |
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { outline: 0; } |
Вы обезопасили себя. Даже в случаях <a><h3></h3></a> и <h3><a></a></h3> у ссылки будут фокус стили.
Это не просто заголовки
Якоря могут вести на любой элемент, а в разметке полно нефокусируемых по умолчанию элементов. В этой ситуации можно использовать другую классическую технику, «yellow fade». Скажем, вместо заголовков мы ссылаемся на
|
1 2 3 4 5 6 7 8 |
section:focus { outline: 0; animation: yellowFade 3s forwards; } @keyframes yellowFade { from { background: lightYellow; } to { background: white; } } |
Что даст нам:
Это адаптация техники, часто используемой для :target.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
