Фокус стили на не интерактивных элементах?

Фокус стили на не интерактивных элементах?

От автора: в апреле Heather Migliorisi рассказывала про доступность плавной прокрутки. Давайте в этой связи рассмотрим вопрос фокус стилей на не интерактивных элементах.

Для плавной прокрутки необходимо:

проверить, чтобы кликнутая ссылка была #jump-ссылкой;

отключить стандартное поведение браузера с мгновенным перепрыгиванием на элемент на странице;

анимировать прокрутку до элемента, на который ссылается #jump-ссылка.

На втором этапе возникают проблемы с доступностью. #jump-ссылка больше не переводит фокус на указанный элемент. Поэтому Heather добавили пункт 4: перемещать фокус на элемент, указанный в #jump-ссылке.

Тем не менее, JS не умеет перемещать фокус на все элементы. Иногда необходимо принудительно дать фокус элементу, что она и сделала с помощью tabindex=”-1”.

Мы обновили наш код, чтобы он стал более доступным при смене фокуса. После этого довольно много людей начали нам писать про появившийся сторонний эффект:

Фокус стили на не интерактивных элементах?

Обратите внимание на светящийся синий контур вокруг заголовков, на которые прокручивается страница.

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

По этой теме даже создали отдельный сайт:

Фокус стили на не интерактивных элементах?

Вы можете изменить фокус стили, если хотите, однако с точки зрения доступности лучше, чтобы фокус стили для элементов в фокусе отличались. Не могу представить, зачем нужно оставлять фокус стили.

Но но но

Заголовки – не фокусируемые элементы.

Это не интерактивные элементы. Мы не привыкли, чтобы фокус стили задавались на не интерактивные элементы. Однако сейчас мы нашли в интернете технику плавной прокрутки, и получили такие стили. Это сделал tabindex=»-1″.

Я написал Heather по этому поводу.

«Стили :focus для заголовков и других не интерактивных элементов можно удалить. Выбор стоит за разработчиками сайта, оставить их или нет. В некоторых случаях я сама удаляла такие стили, в других я их писала. Здесь все на ваше усмотрение.»

К моему удивлению я узнал, что можно удалять фокус стили с элементов, которые принудительно получили фокус и не являются интерактивными. Последнее предложение очень важно, и Heather поясняет: «Если заголовки представлены не в виде ссылок…;)»

Если вы ненавидите фокус стили, то можете сделать следующее:

h1:focus,
h2:focus, 
h3:focus,
h4:focus,
h5:focus,
h6:focus {
  outline: 0;
}

Вы обезопасили себя. Даже в случаях <a><h3></h3></a> и <h3><a></a></h3> у ссылки будут фокус стили.

Это не просто заголовки

Якоря могут вести на любой элемент, а в разметке полно нефокусируемых по умолчанию элементов. В этой ситуации можно использовать другую классическую технику, «yellow fade». Скажем, вместо заголовков мы ссылаемся на

. Когда секция получает фокус, ее можно стилизовать следующим образом:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}

Что даст нам:

Фокус стили на не интерактивных элементах?

Это адаптация техники, часто используемой для :target.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по Webpack. Основы

Прямо сейчас посмотрите курс по Webpack!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree