Фокус не перекрыт

  • WCAG
  • Клавиатура

В Руководстве по доступности веб-контента 2.2 (Web Content Accessibility Guidelines 2.2) появилось восемь новых критериев. Два из них связаны с частой головной болью пользователей клавиатуры (и, следовательно, специалистов по доступности) — перекрытием элемента в фокусе другим содержимым. Это критерии 2.4.11: фокус не перекрыт (минимальный) уровня AA и 2.4.12: фокус не перекрыт (продвинутый) уровня AAA.

Коротко о критериях

Согласно 2.4.11 (минимальный критерий — АА), любые интерактивные элементы в состоянии фокуса, когда они перекрыты другими, должны быть хотя бы частично видны.

Исключения из критерия — задействованные пользователем элементы и компоненты, которые можно перемещать по странице (например, путём перетаскивания).

Также исключением является сам индикатор фокуса (например, обводка вокруг кнопки). Для этого специально существует следующий критерий — 2.4.12 (ААА).

Какие проблемы решают

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

Перекрывать элементы, доступные для клавиатурного фокуса, также могут:

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

Популярные случаи

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

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

Фиксированный баннер с куки — ещё один проблемный паттерн для соответствия этим критериям. Баннеры с длинными текстами привлекают наше внимание в первую очередь. Так что куки-баннеры, перекрывающие всё позади себя, заслуживают отдельного внимания в проверке на соответствие WCAG.

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

Диалоговые окна — отдельная боль. Большинство открытых по умолчанию немодальных окон, особенно расположенных по центру экрана, нарушат минимальный критерий 2.4.11. Распространённый пример подобных диалогов — опять же, настройки куки.

Как и против дропдаунов, критерий 2.4.11 не имеет ничего против модальных окон. Модальный диалог не нарушит критерий сам по себе. Даже если свёрстан… не совсем правильно. Пользователь всегда может проскроллить страницу с модальным диалогом мышкой или другим указателем. Если модалка совсем не даёт устанавливать фокус с клавиатуры на элементах за ней — это уже нарушение.

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

Случай с просвечивающими элементами

Особый случай, который описывает 2.4.11, — элементы с эффектом стекла или с полупрозрачностью. Например, полупрозрачные всплывающие подсказки и фиксированная навигация по сайту.

Здесь, чтобы пройти минимальный 2.4.11, «просвечивающий» компонент должен соответствовать ещё одному критерию — 1.4.11: нетекстовый контраст. Для него проверяют соотношение контраста между цветом интерактивного элемента и фоном наложившегося.

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

Например, цвет ссылки после смешения с фоном — #232323 (ранняя ночь), а фон наложившегося тултипа — #373737 (приглушённый серый). Соотношение контраста между цветами 1.32:1. Это ниже минимального значения для нетекстовых элементов. Таким образом, критерий 2.4.11 провален несмотря на то, что частично скрытый элемент слегка видно. В случаях, как этот, «слегка» чётко определяется другими критериями.

Тултип с дополнительным пояснением к ссылке «Австралия» полностью закрыл собой другую ссылку из текста про утконоса.
Пример с полупрозрачным тултипом.

Обратите внимание, что в примере мы не сравнивали цвет индикатора фокуса. Это потому, что нам не важен внешний вид индикатора, кроме двух ситуаций:

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

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

Две кнопки скрыты полупрозрачным верхним слоем.
Примеры кнопок с разными стилями для состояния фокуса.

Сложные ситуации

Казалось бы всё предельно понятно. Тем не менее при изучении новых критериев у меня возникла пара вопросов:

  • Как проверять ссылки в виде карточек с картинками, заголовками и краткими описаниями? Например, ссылку с текстом и графикой (или только с графикой), у которой видна только часть картинки.
  • Что делать со ссылкой в фокусе, когда её текст сливается с фоном страницы, и видна только обводка вокруг? Ведь даже если ссылка перекрыта чем-то ещё частично, мы не видим сам элемент.

На момент написания этого текста, я не нашла однозначных ответов в тексте WCAG.

Значение для пользователей

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

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

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

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

Как не нарушать критерии

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

Следующий помощник — scroll-padding. Это CSS-свойство увеличивает расстояние между фиксированным элементом и остальным содержимым страницы.

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

Верстайте модальные окна правильно. Не давайте пользователям возможности попасть на страницу, пока они не закроют модалку.

Чтобы решить проблему с сообщением о куки, перекрывающим всё на свете, можно подумать про следующие приёмы:

  • разместить его в самом начале страницы и вообще не фиксировать;
  • показать его в настоящем модальном окне.

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

Превью ссылок в энциклопедии. При фокусе на ссылках статей в Википедии появляются тултипы с картинками и текстом. Некоторые ссылки частично перекрываются раскрытой подсказкой. Тултип исчезает при переходе к новой ссылке и не закрывается с помощью Esc.

У ссылки на список всех выпусков открыт тултип. Подсказка частично перекрывает картинку с синей обводкой вокруг. От первого слова видны последние буквы «AR», от второго слова — «CE».
Статья про журнал «Popular Science».

Так как интерактивные элементы в фокусе скрываются подсказкой только частично, страница соответствует критерию 2.4.11: фокус не перекрыт (минимальный, АА).

Фиксированный хедер в блоге. В блоге Transcend хедер фиксируется при прокрутке страницы вниз и вверх. При перемещении с клавиатуры по странице ни один интерактивный элемент не скрывается за хедером.

Наверху зафиксирована навигация из трёх пунктов. Навигация перекрывает параграф текста без ссылок. В следующем параграфе ссылка «CPRA modified regulations» обведена чёрной рамкой и полностью видна.
Страница одного поста из блога Transcend.

Страница соответствует и минимальному критерию 2.4.11, и максимальному 2.4.12: фокус не перекрыт (продвинутый).

Подсказки в YouTube Studio. В главной вкладке YouTube Studio автоматически появляется уведомление с интерфейсной подсказкой. Этот элемент не закрывает собой активные ссылки. Это соответствует минимальному критерию 2.4.11.

Справа от боковой навигации развёрнут тултип с подсказками о командной работе с каналом. Хвостик тултипа указывает на полностью видимый пункт «Settings». Рядом с тултипом и под ним нет других интерактивных элементов.
YouTube Studio.

Примеры нарушения критериев

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

Одну из ссылок в футере баннер перекрывает полностью. Так как фон баннера полупрозрачный, проверяем контраст. Цвет текста ссылки — #808080 (серый), цвет фона куки-баннера — #4c4c4c (кварцевый серый). Соотношение уровня контраста между двумя цветами — 2.17:1. Это ниже минимального значения для нетекстовых элементов (3:1). Из-за этого сайт не соответствует критерию 2.4.11 уровня AA.

Часть текста «Our site uses…» из полупрозрачного баннера накладывается на ссылку «NHK». Ссылка обведена чёрной рамкой, видна только верхняя часть букв. Рядом, на отдельном скриншоте, показана эта же ссылка, когда она полностью видна.
Сайт NHK World Japan.

Сайт университета с немодальным куки-баннером. На сайте университета Стокгольма немодальное окно с информацией про куки выровнено по центру экрана.

Немодальное окно полностью закрывает часть ссылок в фокусе. Из-за этого сайт не соответствует минимальному критерию 2.4.11.

Из-под баннера с белым фоном выглядывает часть карточки. Виден текст и половина картинки с цветочным полем. На отдельном скриншоте карточка показана полностью. Ссылка «Stockholms universitet paa plats 147 i QS-rankningen» обведена синей рамкой.
Главная университета Стокгольма.

(Недо)модальный куки-баннер. При первом открытии главной посольства Австрии в Токио появляется окно с сообщением о куки. Визуально, из-за затемнённого фона, окно выглядит модальным. При этом мы всё ещё можем навигироваться по странице с клавиатуры, когда окно открыто. Из-за этого названия части полей, ссылок и кнопок полностью перекрываются. Значит, страница не соответствует критерию 2.4.11 уровня AA.

Под окном с согласием на сбор куки видна часть чёрной рамки вокруг поля. Рядом скриншот с полностью видимым полем для сравнения. В поле введён текст «I am human».
Сайт посольства Австрии в Токио.

Методы тестирования

Оба критерия могут быть протестированы как вручную, так и автоматически.

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

Временное полуавтоматическое решение — отдельные букмарклеты для показа стилей фокуса (Show focus styles) и ручное открытие окон, дропдаунов и похожих элементов.

Для ручного тестирования понадобится клавиатура. Примерные этапы тестирования такие:

  1. Убедитесь, что на странице есть интерактивные элементы (кнопки, ссылки и другие).
  2. Найдите элементы, которые накладываются поверх остального содержимого.
  3. Пройдитесь по всем интерактивным элементам с помощью Tab и Shift Tab.
  4. Повторите предыдущие шаги для других брейкпоинтов.

Дополнительные шаги для элементов с полупрозрачным фоном, которые накладываются поверх других:

  1. Узнайте цвет фона верхнего элемента.
  2. Определите цвет элемента в фокусе: его исходный цвет без индикатора фокуса, смешанный с фоном наложившегося элемента.
  3. Проверьте соотношение контраста между цветами.

Тестировать полупрозрачные компоненты можно с помощью инструментов для проверки контраста цветов. Например, Colour Contrast Analyser (CCA) от TPGi и WCAG Color Contrast Checker от Accessible Web.

Если каждый интерактивный элемент в фокусе виден полностью или частично, страница соответствует 2.4.11: фокус не перекрыт (минимальный) уровня AA.

Если полупрозрачные элементы полностью перекрывают элементы в состоянии фокуса, а соотношение контраста между цветами составляет 3:1 и выше, страница также соответствует минимальному критерию.

Когда ни один элемент в состоянии клавиатурного фокуса не скрывается другими, страница соответствует 2.4.12: фокус не перекрыт (продвинутый) уровня AAA.

Что почитать

Спасибо Ане за помощь с редактурой 💖

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