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

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

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

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

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

Это один из самых сложных критериев, которые планируют добавить в новую версию WCAG. Сейчас он активно обсуждается и дорабатывается.

Коротко

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

  • обводить элемент;
  • иметь соотношение контраста минимум 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, а вот для градиентной тени это не важно.

Несколько вариантов кнопок без фокуса и в фокусе. Одна кнопка без фокуса с чёрным фоном, белым текстом «Настройки» и прямыми углами. При фокусе она становится больше, внутри появляется белая жирная рамка, меняется цвет фона на белый, рядом с названием появляется жирная белая вертикальная черта и не такая жирная горизонтальная. Другая кнопка без фокуса с серым фоном, таким же названием и со скруглёнными краями. При фокусе у неё появляется чёрная сплошная и пунктирная рамки снаружи, а ещё размытая серая тень. Последняя кнопка круглая и с иконкой лупы внутри. При фокусе у неё появляется жирная круглая рамка внутри, более тонкая рамка снаружи и двойная рамка со светло-фиолетовой линией внутри и чёрной снаружи.
Варианты стилей фокуса, которые соответствуют критерию 2.4.11.

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

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

Для ссылок не критично, если индикатор фокуса не сплошной и одна из его сторон скрывается при переносе ссылки. Обычно это происходит, когда используете свойство 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 пикселя. Кнопки с розовым фоном при фокусе меняют свой фон на белый, они обводятся розовой рамкой, а снаружи появляется ещё одна рамка толщиной 3 пикселя.

Несколько видов элементов в состоянии фокуса и без — ссылки и несколько кнопок. Они подробно описаны до картинки.
Стили фокуса у ссылок и кнопок на сайте Fable.

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

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

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

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

Несколько видов элементов в состоянии фокуса и без него — поле поиска, ссылки и кнопки. Подробнее описаны до картинки.
Стили кнопок, ссылок и полей на gov.uk.

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

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

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

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

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

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

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

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

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

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

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

Что почитать

Другие посты