WCAG 1.3.3 Сенсорные характеристики

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

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

Инструкции для понимания и использования контента не должны опираться только на сенсорные характеристики элементов, такие как:

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

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

WCAG отмечает, что полные требования к цвету содержатся в руководстве 1.4.

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

• «Нажмите зелёную кнопку, чтобы завершить заказ»;
• «Листайте стрелками справа, чтобы увидеть больше товаров» в карусели;
• «Обязательные поля выделены красным» без какого-либо другого обозначения;
• «Нажмите на иконку вверху, чтобы открыть корзину», когда у иконки нет имени;
• звук подтверждает какое-то действие, но текстового сообщения нет.

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

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

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

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

• Называйте элемент: «Выберите Оформить заказ» вместо «нажмите зелёную кнопку».
• Сочетайте подсказки: «Обязательные поля отмечены звёздочкой (*) и словом „обязательно“».
• Дайте кнопкам-иконкам текстовую подпись или доступное имя и используйте это имя в инструкциях.
• Сопровождайте звуки видимым текстовым сообщением.

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

• 1.4.1 Использование цвета — цвет как единственная визуальная подсказка.
• 1.3.1 Информация и взаимосвязи — структура и подписи в коде.
• 1.3.2 Значимая последовательность — порядок чтения.

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

Можно ли по-прежнему писать «кнопка справа»?

Да, если инструкция также называет кнопку, например «Выберите „Продолжить“ — кнопку справа». Расположение может быть дополнительной подсказкой, но не единственным способом найти элемент.

Можно ли писать «выше» и «ниже»?

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

Чем 1.3.3 отличается от 1.4.1 «Использование цвета»?

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