Стандартизация стилей фокуса с помощью пользовательских свойств CSS
Вы сможете визуально следить за фокусом, когда он перескакивает между элементами в DOM. Но если вы не видите каких-либо визуальных изменений или видите лишь едва заметные визуальные изменения, значит, вы нашли то, что поможет изменить ситуацию к лучшему для ваших посетителей.
Мы рассмотрим метод, позволяющий сделать стили фокуса более управляемыми с помощью пользовательских свойств CSS, и узнаем о современном селекторе фокуса CSS. Но сначала давайте узнаем больше о том, почему стили видимого фокуса так важны.
Встречайте критерии стиля фокуса WCAG
Содержание статьи:
Состояния видимого фокуса описаны в Руководстве по обеспечению доступности веб-контента (WCAG) критерий 2.4.7 — Focus Visible. В документе «Понимание» для версии 2.4.7 указано следующее:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В грядущем WCAG 2.2 добавляется новый критерий, чтобы уточнить, «насколько видимым должен быть индикатор фокуса». Несмотря на то, что в настоящее время он находится в разработке, ознакомление и применение рекомендаций из 2.4.11 — внешний вид фокуса (минимум) — это, безусловно, положительный шаг, который вы можете предпринять, чтобы улучшить свои стили фокуса.
Управление стилем фокуса с помощью пользовательских свойств CSS
Техника, которую я начал использовать в этом году, состоит в том, чтобы включить следующую настройку для первичных базовых интерактивных элементов:
CSS :is(a, button, input, textarea, summary) { –outline-size: max(2px, 0.08em); –outline-style: solid; –outline-color: currentColor; } :is(a, button, input, textarea, summary):focus { outline: var(–outline-size) var(–outline-style) var(–outline-color); outline-offset: var(–outline-offset, var(–outline-size)); }
| 12345678910 | :is(a, button, input, textarea, summary) { –outline-size: max(2px, 0.08em); –outline-style: solid; –outline-color: currentColor;} :is(a, button, input, textarea, summary):focus { outline: var(–outline-size) var(–outline-style) var(–outline-color); outline-offset: var(–outline-offset, var(–outline-size));} |
Это добавляет пользовательские свойства, которые позволяют вам гибко настраивать только части стиля контура по мере необходимости, чтобы фокус оставался видимым при изменении контекста элемента.
Для —outline-size, мы используем значение max(), чтобы обеспечить по крайней мере значение 2px, допуская при этом возможность масштабирования относительно компонента (например, большой кнопки или ссылки в заголовке) на основе 0.08em.
Свойство, с которым вы, возможно, не знакомы, outline-offset определяет пространство между элементом и контуром. Вы даже можете указать отрицательное число для вставки контура, что может быть очень полезно для обеспечения контраста стиля фокуса. В нашем наборе правил мы настроили это свойство так, чтобы оно принимало необязательное пользовательское свойство —outline-offset, чтобы его можно было настроить при необходимости, в противном случае оно соответствует запасному варианту —outline-size.
Улучшения внешнего вида контура
За всю мою карьеру, меня попросили удалить контуры, и я удалил их, потому что они считались «уродливыми».
Есть два случая, в которых контур абсолютно никогда не должен быть удален:
Outline наследует border-radius в Chromium и Firefox. Это означает, что вы можете рассмотреть возможность удаления любых хаков, например, имитация box-shadow (что имеет еще одно положительное влияние на доступность, гарантируя, что стили фокуса не будут удалены для пользователей Windows High Contrast Theme).
С помощью :focus-visible мы можем попросить браузер использовать эвристику, чтобы отображать стили фокуса только тогда, когда он обнаруживает модальности ввода, требующие видимого фокуса. Упрощенно, это означает, что пользователи мыши не увидят стили фокуса при клике, а пользователи клавиатуры по-прежнему будут видеть их на вкладке.
Важно отметить, что элементы формы всегда отображают стиль фокуса — на них не распространяется поведение :focus-visible.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Итак, давайте улучшим наш набор правил, добавив следующее, чтобы включить :focus-visible. Сохраним исходный стиль :focus, который мы уже определили для старых браузеров:
CSS :is(a, button, input, textarea, summary):focus-visible { outline: var(–outline-size) var(–outline-style) var(–outline-color); outline-offset: var(–outline-offset, var(–outline-size)); }
| 1234 | :is(a, button, input, textarea, summary):focus-visible { outline: var(–outline-size) var(–outline-style) var(–outline-color); outline-offset: var(–outline-offset, var(–outline-size));} |
Из-за того, что браузеры пропускают селекторы, которые они не понимают, нам нужно создавать отдельные правила, а не объединять их, даже если они определяют одни и те же свойства для outline.
И наконец, нам также нужно правило :focus:not(:focus-visible), которое удаляет обычные стили фокуса для браузеров, поддерживающих :focus-visible:
CSS :is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none; }
| 123 | :is(a, button, input, textarea, summary):focus:not(:focus-visible) { outline: none;} |
Следует отметить, что последние версии Chromium и Firefox переключились на использование :focus-visible в качестве способа по умолчанию для применения стилей фокуса к интерактивным элементам, и совсем недавно это правило было включено по умолчанию в webkit, поэтому скоро :focus-visible должно стать доступным в Safari! Наши правила остаются в силе, так как мы настраиваем внешний вид для outline.
Для получения дополнительных указаний по стилям видимого фокуса я рекомендую замечательное и подробное руководство Сары Суэйдан по индикаторам фокуса, потому что оно учитывает грядущий критерий 2.4.11.
Демонстрация стилей фокуса
Ниже показано примеры каждого из интерактивных элементов и способы применения настроек с помощью пользовательских свойств, включая несколько изменений для темного режима. В зависимости от поддержки вашего браузера вы можете не увидеть стиль фокуса :focus-visible, пока не используете клавишу табуляции.
CodePen Embed Fallback
И последнее замечание: button это уникальный интерактивный элемент, когда дело доходит до стилей фокуса, потому что он имеет дополнительные настройки своего состояния, особенно если вы полагаетесь только на цвет.
Автор: Stephanie Eckles
Источник: webformyself.com