WCAG 2.4.6 Заголовки та маркування

Критерій успіху 2.4.6 допомагає людям зрозуміти, що містить сторінка, і знайти потрібну частину. Користувачі програм зчитування з екрана переходять від заголовка до заголовка, люди з когнітивними порушеннями спираються на зрозумілі заголовки, щоб стежити за структурою, і всі швидше заповнюють форму, коли мітки полів точно кажуть, що від них очікують. Це рівень AA, і він входить до EN 301 549 (пункт 9.2.4.6; в Україні — ДСТУ EN 301 549:2022).

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

Заголовки й мітки описують тему чи призначення.

Важливі уточнення W3C:

• критерій не вимагає, щоб заголовки чи мітки існували, — він вимагає, щоб наявні були описовими;
• мітка — це текст, показаний усім користувачам, що ідентифікує компонент (не лише HTML-елемент <label>);
• мітки можуть бути короткими, якщо вони чітко ідентифікують вміст;
• заголовки й мітки також мають бути правильно розмічені, щоб допоміжні технології могли їх знайти, — ця частина належить до 1.3.1 «Інформація та взаємозв'язки».

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

• розмиті заголовки розділів на кшталт «Більше», «Інфо» чи «Розділ 2» на сторінці товару;
• кілька однакових заголовків («Деталі») на одній сторінці, що стосуються різного;
• поля форми з міткою «Ім'я», коли ім'я та прізвище окремі, або «Номер» без підказки, чи це номер телефону, чи будинку;
• поле промокоду з міткою лише «Код»;
• заголовки, використані для оформлення, — великий текст «Безкоштовна доставка!», розмічений як <h2>, тоді як справжні назви розділів — звичайний текст у <div>.

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

Автоматично: для цього критерію немає правила axe-core. Програма може виявити, що заголовок чи мітка існує, але не те, чи описує він вміст, тож потрібна ручна перевірка. Пов'язані проблеми, як-от відсутні мітки полів (1.3.1, 4.1.2) і пропущені рівні заголовків (добра практика), наш сканер показує за власними правилами в бібліотеці правил.

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

Як виправити

• Пишіть заголовки, що називають вміст: «Розмір і посадка», «Доставка й повернення», «Відгуки покупців (24)».
• Залишайте один <h1> на сторінку, що відповідає її головній темі, і логічно вкладайте h2/h3.
• Робіть мітки конкретними: «Адреса email», «Номер телефону (для кур'єра)», «Код знижки».
• Використовуйте справжні елементи заголовків для назв розділів і звичайний стилізований текст для оформлення.

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

• 2.4.2 Заголовок сторінки — заголовок сторінки має бути описовим.
• 2.5.3 Маркування в назві елемента — видима мітка має бути в доступній назві.
• 2.4.1 Пропускання блоків — заголовки допомагають пропускати повторюваний вміст.

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

Чи вимагає WCAG 2.4.6 заголовків на кожній сторінці?

Ні. W3C зазначає, що 2.4.6 не вимагає наявності заголовків чи міток. Він вимагає, щоб наявні заголовки й мітки описували свою тему чи призначення. Інші критерії, як-от 1.3.1 і 3.3.2, визначають, коли структура й мітки потрібні.

Чи вимагає WCAG суворого порядку заголовків?

У WCAG 2.2 немає критерію успіху, що забороняє пропускати рівні заголовків. Логічний порядок (h1, потім h2, потім h3) — сильна добра практика, і наш сканер повідомляє про пропущені рівні як про питання доброї практики, а не як про порушення 2.4.6.

Що таке мітка у WCAG?

Текст або інший компонент із текстовою альтернативою, який показано всім користувачам, щоб ідентифікувати компонент, наприклад видимий текст біля поля форми. Це не обмежується HTML-елементом label.