WCAG 3.2.4 Узгоджене розпізнавання

Критерій успіху 3.2.4 (в оригіналі — Consistent Identification, тобто однакове позначення) дає людям змогу один раз вивчити сайт. Користувачі програм зчитування з екрана спираються на доступні назви, а люди з когнітивними порушеннями чи труднощами навчання — на впізнавання слів та іконок. Якщо та сама кнопка пошуку на одній сторінці називається «Пошук», а на іншій «Знайти», вони можуть подумати, що це інша функція. Це рівень AA, і в EN 301 549 він є пунктом 9.3.2.4 (в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Компоненти з однаковою функціональністю в межах набору вебсторінок мають ідентифікуватися узгоджено. «Однакова функціональність» означає, що компонент дає той самий результат під час використання. Ідентифікація охоплює видиму мітку, іконку та текстову альтернативу чи доступну назву.

Уточнення з документа W3C Understanding:

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

Типові помилки в інтернет-магазині

• «Додати в кошик» на сторінках товарів і «Купити» на сторінках категорій для тієї самої дії, з різними доступними назвами;
• іконка кошика має альтернативний текст «Кошик» в одному шаблоні і «Сумка» чи жодної назви в іншому;
• поле пошуку має мітку «Пошук» у шапці і «Знайти товари» в мобільному меню, з різними іконками;
• те саме посилання «Завантажити рахунок» використовує в одному місці іконку принтера, а в іншому — іконку документа;
• видима мітка залишається тією самою, але aria-label відрізняється на різних сторінках.

Як перевірити

Автоматично: у нашого сканера немає правила для цього критерію. Він може повідомити про відсутні назви (див. 4.1.2), але вирішити, що два компоненти мають спільну функцію, може лише людина.

Вручну: складіть список компонентів, що з'являються на багатьох сторінках: пошук, кошик, акаунт, обране, додавання в кошик, підписка на розсилку, перемикач мов. На кількох типах сторінок порівняйте їхню видиму мітку, іконку й доступну назву (перегляньте елемент чи скористайтеся програмою зчитування з екрана). Запишіть ті, що відрізняються для тієї самої функції.

Як виправити

• Визначте мітки один раз у рядках перекладу теми й використовуйте їх у кожному шаблоні.
• Використовуйте один набір іконок і однаковий альтернативний текст для кожної функції.
• Синхронізуйте значення aria-label з видимими мітками і починайте доступну назву з видимого тексту.
• Коли застосунки додають власні кнопки, перейменуйте їх відповідно до формулювань теми.

Пов'язані критерії

• 3.2.3 Узгоджена навігація — повторювана навігація в тому самому порядку.
• 2.5.3 Маркування в назві елемента — доступна назва містить видиму мітку.
• 4.1.2 Назва, роль, значення — кожен елемент керування має назву.

Часті запитання

Чи мають мітки бути ідентичними слово в слово?

Ні. WCAG каже, що узгоджено не означає ідентично. Мітки мають чітко показувати, що це та сама функція, наприклад «Додати в кошик» і «Додати в кошик: Синя куртка» — узгоджені.

Чи охоплює 3.2.4 іконки?

Так. Іконки та їхні текстові альтернативи теж ідентифікують компоненти. Іконка сумки для кошика на одній сторінці і іконка візка з іншим альтернативним текстом на іншій можуть бути порушенням.

Чи може автоматичний сканер перевірити 3.2.4?

Ні. Вирішити, чи мають два компоненти однакову функцію, може лише людина, тож це ручна перевірка на кількох сторінках.