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 охоплює будь-яке використання кольору як єдиного візуального способу передати інформацію, не лише в інструкціях.