Внешний вид фокуса

  • WCAG
  • Дизайн
  • CSS
  • Клавиатура
Обновлено:

В этом посте из серии про разбор Руководств по доступности веб-контента (Web Content Accessibility Guidelines, коротко WCAG) расскажу про новый критерий из WCAG 2.2 — 2.4.11: внешний вид фокуса. Он связан с другим критерием про видимый фокус, про который уже рассказывала раньше.

Критерий про внешний вид фокуса уровня AA. Он относится к принципу управляемости и к руководству про доступность с клавиатуры.

В первоначальной версии черновика WCAG 2.2 было два критерия про то, как должен выглядеть фокус. Один минимальный уровня AA, другой продвинутый уровня AAA. В итоге от продвинутого отказались и оставили только минимальный.

Коротко

Когда элемент интерфейса получает фокус с клавиатуры, индикатор фокуса должен:

  • обводить элемент;
  • иметь соотношение контраста минимум три к одному (3:1) между одними и теми же пикселями в состоянии фокуса и без него;
  • иметь соотношение контраста минимум три к одному (3:1) по отношению к соседним цветам.

Область индикатора фокуса должна:

  • быть толщиной на один (1) CSS-пиксель (дальше просто пиксель) больше минимальной области элемента или больше четырёх (4) пикселей, если индикатор равен самой короткой стороне элемента;
  • иметь соотношение контраста минимум три к одному (3:1) между одними и теми же пикселями в состоянии фокуса и без него;
  • иметь соотношение контраста минимум три к одному (3:1) по отношению к соседним цветам или быть толщиной два (2) пикселя и больше.

Подробнее

В критерии речь идёт о фокусе, который становится виден при навигации с клавиатуры. Таким образом, он касается стилей, которые задаются псевдоклассам :focus или :focus-visible.

Индикатор фокуса (focus indicator) — это изменяющаяся область вокруг или внутри интерактивного элемента, когда на нём сделан фокус. Для пользователей клавиатуры индикатор фокуса — это как курсор для пользователей мыши.

Индикатор фокуса может выглядеть как рамка вокруг элемента (outline) или повторять форму элемента (shape).

Другие важные термины — граница (bound, solidly bound) и окаймление (surround). Граница — это прямоугольная рамка вокруг элемента, которая находится от него на некотором расстоянии. Окаймление — это рамка, которая повторяет форму элемента.

В свою очередь, границы и окаймления могут быть сплошными (solid) и несплошными (non-solid).

Хотя критерий требует использовать сплошное начертание, он не запрещает полностью несплошное — пунктирную линию.

Подытожим новые требованиям к фокусу в виде рамки или окаймления:

  • в первую очередь сплошное начертание, но допустимо пунктирное с большей толщиной;
  • полностью обводит или окаймляет элемент;
  • толщина минимум один (1) пиксель если они вокруг элемента, в том числе круглой формы;
  • толщина минимум два (2) пикселя, когда рамка внутри элемента, она того же цвета, что элемент, или это горизонтальная черта под или над элементом;
  • толщина минимум четыре (4) пикселя, если это пунктирная линия;
  • толщина минимум четыре (4) пикселя, когда это вертикальная черта слева или справа от текста внутри элемента;
  • достаточно контрастная:
    • три к одному (3:1) по отношению к цвету элемента, когда он неактивен (не в фокусе);
    • три к одному (3:1) по отношению к фону страницы.

Индикатор фокуса может быть и в виде двойной рамки. В этом случае контрастной должна быть только одна.

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

Когда используете обычную или градиентную тень, обращайте внимание на несколько вещей:

  • насколько тень далеко выходит за пределы элемента;
  • как сопоставляется с размерами элемента.

Обычная тень с одним цветом тоже должна быть контрастной в соотношении три к одному (3:1), а вот для градиентной тени это не важно.

Разберём на примере нескольких вариантов кнопок. У одной из прямоугольных кнопок без фокуса чёрный фон и белый текст «Настройки». При фокусе кнопка становится больше, а внутри появляется белая жирная рамка. В другом варианте цвет фона становится белым, а рядом с текстом появляется жирная белая вертикальная черта и не такая жирная горизонтальная.

У другой кнопки со скруглёнными краями по умолчанию серый фон и тёмно-серый текст внутри. Так что при фокусе в одном случаем появляется чёрная сплошная рамка, в другом — пунктирная, а в последнем — размытая серая тень.

Последняя круглая кнопка по умолчанию тоже серая, но внутри, вместо текста, тёмно-серая иконка лупы. В родном случае при фокусе появляется жирная круглая внутренняя рамка, в другом — рамка снаружи, и в последнем — двойная рамка со светло-фиолетовой линией внутри и чёрной снаружи.

Примеры с кнопками разной формы.
Варианты стилей фокуса, которые соответствуют критерию.

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

  • у всего компонента;
  • у вложенных в него компонентов;
  • одновременно у всего компонента и у вложенных в него элементов.

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

Наконец, есть несколько исключений. В этих случаях не надо следить за внешним видом индикатора фокуса:

  • Браузерные стили фокуса по умолчанию.
  • Элементы, у которых нельзя поменять стили фокуса по молчанию. К примеру, <select>.
  • Большие интерактивные области как в текстовых редакторах.
  • Неинтерактивные элементы, которые могут в каких-то случаях получать фокус. Например, заголовки.

Немного геометрии

Почему в каких-то случаях достаточно сделать индикатор фокуса в один (1) пиксель, а в каких-то больше? Чтобы ответить на вопрос, надо стряхнуть пыль со школьной геометрии и пару раз перечитать подробное описание критерия.

Общий принцип такой — в состоянии фокуса минимальная область элемента должна быть больше на один (1) пиксель минимум, чем в состоянии по умолчанию.

Чтобы выяснить минимальную область прямоугольного элемента или круглого, надо посчитать их периметр.

В случае прямоугольника умножаем его ширину на два (2), потом толщину и складываем их вместе. Кратко формула выглядит так: 2 × высота + 2 × ширина.

Чтобы вычислить нужный периметр кнопки максимально точно, из периметра вычитаем ещё четыре — сумму пикселей четырёх углов прямоугольника. Таким образом, окончательная формула выглядит так — 2 × высота + 2 × ширина − 4.

Разберём на конкретном примере прямоугольной кнопки шириной 90 пикселей и высотой 30. Умножаем каждую сторону на 2 и складываем их. 90 × 2 × 30 × 2. Получаем 240 пикселей. Теперь вычитаем из получившегося периметра 4 — 240 − 4. Получаем минимальную область 236 пикселей. Индикатор фокуса должен увеличить эту область. Так что, 1 пиксель или даже 3 подходят для рамки вокруг такого элемента.

Для определения периметра круга нужно умножить на два число пи (𝜋) и радиус круга (r). Формула выглядит так — 2𝜋r.

Представим, что у кнопки радиус 22 пикселя. В этом случае умножаем 3.14 на 2 и затем на 22. Округлим число и получим 138 пикселей. В этом случае внешняя рамка может быть шириной 1 пиксель, так как эта область получается больше минимальной. А вот рамка внутри круглой кнопки уже должна быть минимум 2 пикселя.

Рассчитывать каждый раз периметр минимальной области элементов не нужно. Главное понимать общий принцип расчёта толщины индикатора фокуса.

Кому это важно

  • Все пользователи клавиатуры — люди с особенностями моторики, продвинутые пользователи.
  • Люди с когнитивными особенностями, у которых небольшой объём рабочей памяти или они легко отвлекаются и забывают на каком элементе остановились.

Как избежать барьер

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

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

У разработчиков много способов задать стили для :focus или :focus-visible. Например, с помощью свойств outline, border, box-shadow, text-decoration или background. Подробнее про их плюсы и минусы почитайте в статье «Developing a focus style for a themable design system».

Примеры соответствия критерию

  • Когда ссылка в фокусе, вокруг неё появляется сплошная чёрная рамка шириной два (2) пикселя, которая полностью обводит ссылку со всех сторон. Фон страницы при этом светло-серый.
  • При фокусе на кнопке вокруг неё на небольшом расстоянии появляется сплошная тёмно-синяя рамка толщиной три (3) пикселя. Она достаточно контрастная по отношению к фону страницы.

На сайте сервиса для тестирования Fable используют несколько способов выделения элементов при фокусе. У текстовых ссылок меняется фоновый цвет и цвет текста. В неактивном состоянии ссылки голубого цвета, в фокусе их фон становится голубым, а цвет текста — белым. Нетекстовая ссылка с логотипом при фокусе обводится синей рамкой толщиной в три (3) пикселя.

Кнопки с белым фоном при фокусе обводятся рамкой внутри, толщина которой тоже три (3) пикселя. Кнопки с розовым фоном при фокусе меняют свой фон на белый, они обводятся розовой рамкой, а снаружи появляется ещё одна рамка такой же толщины.

Ссылки и кнопки в разных состояниях. Подробное описание перед картинкой.
Элементы интерфейса Fable.

На gov.uk также обнаружите несколько вариантов стилей для фокуса.

Ссылки по умолчанию синие с тонкой чертой такого же цвета под ними. Когда делаете на них фокус, они становятся чёрными, нижнее подчёркивание тоже становится чёрным и более жирным, а фон меняется на жёлтый.

Что касается текстовых полей, по умолчанию вокруг них тонкая чёрная рамка. При фокусе рамка становится более жирной, дополнительно вокруг неё появляется ещё одна жёлтого цвета.

У некоторых кнопок при фокусе фон с серого меняется на жёлтый, а более жирная нижняя граница увеличивается где-то на три (3) пикселя.

Поле поиска, ссылки и кнопки в состоянии фокуса и без. Подробное описание до картинки.
Интерфейс gov.uk.

Примеры барьеров

  • Вокруг названия вкладки при фокусе появляется пунктирная черта с точками, ширина которой 1 пиксель.
  • При фокусе внутри кнопки рядом с текстом появляется вертикальная черта толщиной 1 пиксель.

На сайте музея Ikea при фокусе на ссылках вокруг них появляется тонкая пунктирная рамка светло-серого цвета или тёмно-серого цвета в зависимости от цвета текста. Для неё используется свойство outline со значением 1px dotted currentColor.

Стили фокуса у ссылки из сообщения о кукиз, слайда из карусели, другой ссылки из футера и у логотипа сайта.
Интерактивные элементы на сайте музея Ikea.

Как тестировать

Тестируйте критерий смешанным способом, как и видимый фокус.

  • Найдите все интерактивные элементы с помощью Tab или скриптом.
  • Убедитесь, что у всех элементов индикатор фокуса соответствует требованиям.

Чтобы найти интерактивные элементы, используйте букмарклеты ANDI или Force Show Keyboard Focus. Другой способ — напишите свой небольшой скрипт и соберите интерактивные элементы в консоли в браузере.

document.addEventListener('focus', () => {
  console.log(document.activeElement);
}, true);

Есть букмарклет Скотта О’Хары, который автоматически проходит через элементы и показывает их стили фокуса.

Наконец, если не можете определить на глаз толщину индикатора фокуса, можно посмотреть на его стили в инструменте разработчика в отдельной вкладке с ними. А соотношение контраста можно проверить, например, в WebAIM Contrast Checker.

Что почитать

Другие статьи