Это будет вторая статья в небольшой серии о доступности форм, которую мы делаем. Если вы пропустили первый пост, посмотрите Доступные формы с псевдоклассами. В этом посте мы рассмотрим :focus-visible и то, как его использовать на своих веб-сайтах!

Фокус Touchpoint

Прежде чем мы продолжим :focus-visible, давайте вернемся к тому, как :focus работает в вашем CSS. Фокус — это визуальный индикатор того, что с элементом взаимодействуют с помощью клавиатуры, мыши, трекпада или вспомогательных технологий. Некоторые элементы естественно интерактивны, например ссылки, кнопки и элементы форм. Мы хотим быть уверены, что наши пользователи знают, где они находятся и какие взаимодействия они совершают.

Помните, не делайте этого в своем CSS.!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Когда вы удаляете фокус, вы удаляете его на КАЖДЫЙ! Мы хотим быть уверены, что сохраняем фокус.

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

Что такое focus-visible?

Псевдокласс, :focus-visible, такой же, как и наш по умолчанию :focus псевдокласс. Это дает пользователю индикатор того, что на странице что-то сосредоточено. То, как ты пишешь :focus-visible разрезано и сухо:

:focus-visible {
  /* ... */
}

Когда используешь :focus-visible для определенного элемента синтаксис выглядит примерно так:

.your-element:focus-visible {
  /*...*/
}

Самое замечательное в использовании :focus-visible вы можете выделить свой элемент, яркий и смелый! Не нужно беспокоиться о том, что будет показано, был ли элемент нажат/нажат. Если вы решите не реализовывать этот класс, по умолчанию будет использоваться кольцо фокусировки пользовательского агента, что для некоторых нежелательно.

Предыстория focus-visible

Раньше у нас был :focus-visible, будет применен стиль пользовательского агента :focus большинству элементов на странице; кнопки, ссылки и т. д. К фокусируемому элементу будет применен контур или «кольцо фокусировки». Это было сочтено уродливым, большинству не понравилось кольцо фокусировки по умолчанию, предоставленное браузером. Из-за того, что на кольцо фокусировки было неприятно смотреть, большинство авторов удалили его… без запасного варианта. Помните, что когда вы удаляете :focus, это снижает удобство использования и делает его недоступным для пользователей клавиатуры.

В текущем состоянии Интернета браузер больше не указывает видимым образом фокус вокруг различных элементов, когда они находятся в фокусе. Вместо этого браузер использует различные эвристики, чтобы определить, когда он может помочь пользователю, предоставляя взамен кольцо фокусировки. В соответствии с Khan Academy, эвристика - это, «метод, который направляет алгоритм на поиск правильного выбора».

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

В первые дни :focus-visible мы использовали полифил для управления кольцом фокусировки, созданным Элис Боксхолл и Брайаном Карделлом, Mozilla также выпустила собственный псевдокласс, :moz-focusring, до официальной спецификации. Если вы хотите узнать больше о первых днях существования кольца фокусировки, посетите A11y Кастует с Робом Додсоном.

Фокус Важность

Существует множество причин, по которым фокус важен в вашем приложении. Во-первых, как я уже говорил выше, мы, как представители Интернета, должны быть уверены, что предоставляем лучший и доступный опыт, который только можем. Мы не хотим, чтобы кто-либо из наших пользователей догадывался, где они находятся, пока они перемещаются по интерфейсу.

Один пример, который всегда приходит на ум, — это Сайт двух слепых братьев. Если вы зайдете на веб-сайт и щелкнете/коснетесь (это работает на мобильных устройствах) закрытого глаза в левом нижнем углу, вы увидите, что глаз открыт, и начинается симуляция. У обоих братьев, Брэдфорда и Брайана Мэннинга, в молодом возрасте была диагностирована болезнь Штаргардта. Болезнь Штаргардта – это форма дегенерации желтого пятна глаза. Со временем оба брата полностью ослепнут. Посетите сайт и нажмите на глаз, чтобы увидеть, как они видят.

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

Демо

Демо ниже показывает, как :focus-visible работает при добавлении в ваш CSS. В первой части видео показан опыт навигации с помощью мыши, а во второй — только с помощью клавиатуры. Я также записал себя, чтобы показать, что я переключился с мыши на клавиатуру.

Браузер предсказывает, что делать с кольцом фокусировки на основе моего ввода (клавиатура/мышь), а затем добавляет кольцо фокусировки к этим элементам. В этом случае, когда я перемещаюсь по этому примеру с помощью клавиатуры, все получает фокус. При использовании мыши фокус получает только ввод, а кнопки — нет. Если вы удалите :focus-visible, браузер применит кольцо фокусировки по умолчанию.

Приведенный ниже код применяется :focus-visible к фокусируемым элементам.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Если вы хотите указать label или кнопку получения :focus-visible просто добавьте класс с input or button соответственно.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Поддержка

Если браузер не поддерживает :focus-visible вы можете вернуться на место, чтобы справиться с взаимодействием. Код ниже взят из Детская площадка МДН, Вы можете использовать @поддерживает правило или «запрос функции» чтобы проверить поддержку. Следует иметь в виду одну вещь: правило должно быть размещено в верхней части кода или вложено в другое групповое правило.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Дальнейшие проблемы доступности

Проблемы доступности, которые следует учитывать при построении вашего опыта:

• Убедитесь, что цвета, которые вы выбрали для индикатора фокусировки, (если они вообще доступны) по-прежнему доступны в соответствии с информацией, описанной в WCAG 2.2 Нетекстовый контраст (уровень AA)
• Когнитивная перегрузка может вызвать у пользователя расстройство. Обязательно сохраняйте единообразие стилей различных интерактивных элементов.

Поддержка браузера

Ссылки

• SEO-контент и PR-распределение. Получите усиление сегодня.
• PlatoData.Network Вертикальный генеративный ИИ. Расширьте возможности себя. Доступ здесь.
• ПлатонАйСтрим. Интеллект Web3. Расширение знаний. Доступ здесь.
• ПлатонЭСГ. Углерод, чистые технологии, Энергия, Окружающая среда, Солнечная, Управление отходами. Доступ здесь.
• ПлатонЗдоровье. Биотехнологии и клинические исследования. Доступ здесь.
• Источник: https://css-tricks.com/managing-user-focus-with-focus-visible/