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

Критерий успеха 2.1.1 нужен для того, чтобы сайтом можно было пользоваться без мыши: незрячим посетителям с программой экранного доступа (скринридером), людям с тремором или ограниченной подвижностью рук, людям, которые используют кнопочные устройства или голосовое управление, имитирующие клавиатуру, а также опытным пользователям, которые просто предпочитают клавиатуру. Это уровень A, критерий входит в EN 301 549 (пункт 9.2.1.1), на который опирается Европейский акт о доступности. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

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

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

Дополнительно предлагать мышь, касание или другие способы ввода можно и даже желательно.

Типичные ошибки в интернет-магазине

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

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

Автоматически: наша проверка отмечает несколько клавиатурных шаблонов: прокручиваемые области, которые не могут получить фокус, iframe с интерактивным контентом, исключённые из порядка табуляции, и серверные карты изображений (правила в нашей библиотеке правил). Она не может определить, работает ли каждая функция с клавиатуры, поэтому основная проверка — ручная.

Вручную: уберите мышь и пройдите настоящую покупку. Используйте Tab и Shift+Tab для перемещения, Enter для перехода по ссылкам и нажатия кнопок, Пробел для кнопок и чекбоксов, стрелки внутри меню, ползунков и групп радиокнопок и Esc для закрытия диалогов. Откройте меню, отфильтруйте категорию, выберите вариант товара, добавьте в корзину, примените купон и дойдите до шага оплаты. Всё, что можно сделать мышью, должно быть возможно и так.

Как исправить

• Используйте нативные HTML-элементы — <button>, <a href>, <input>, <select>: они по умолчанию работают с клавиатуры.
• Если без собственного виджета не обойтись, задайте ему tabindex="0", ARIA-роль и обработчики клавиш по шаблону WAI-ARIA Authoring Practices для этого виджета.
• Сделайте так, чтобы меню, открывающиеся при наведении, открывались и при фокусе или по Enter и оставались открытыми, пока фокус внутри.
• Проверьте приложения темы и плагины (отзывы, чат, избранное) — многие проблемы с клавиатурой возникают из-за сторонних виджетов.

Связанные критерии

• 2.1.2 Отсутствие клавиатурной ловушки — фокус клавиатуры всегда должен иметь возможность покинуть компонент.
• 2.4.3 Порядок фокуса — порядок остановок Tab должен быть логичным.
• 2.4.7 Видимый фокус — пользователи должны видеть, где находится фокус клавиатуры.

Частые вопросы

Что требует WCAG 2.1.1 «Клавиатура»?

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

Есть ли исключение из требования к клавиатуре?

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

Может ли автоматический инструмент проверить доступность с клавиатуры?

Только частично. Проверка может найти некоторые шаблоны, например прокручиваемые области, которые не получают фокус. Работает ли каждое меню, фильтр и шаг оформления заказа с клавишами Tab, Enter, Пробел и стрелками, нужно проверять вручную.