WCAG 2.4.2 Заголовок сторінки

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

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

Вебсторінки мають заголовки, що описують тему чи призначення.

У HTML це означає непорожній елемент <title>. Настанови W3C додають:

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

Добра практика (не сувора вимога) — ставити найконкретнішу інформацію першою: «Синя лляна сорочка – Чоловічі сорочки – Назва магазину», а не «Назва магазину – Назва магазину – Сорочка».

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

• на кожній сторінці той самий заголовок — лише назва магазину;
• сторінки товарів із внутрішніми кодами в заголовку («SKU 4471-B»);
• сторінки результатів пошуку без запиту в заголовку;
• кроки оформлення замовлення чи сторінки акаунта в односторінковому застосунку, що зберігають заголовок першого подання;
• відсутній або порожній <title> на цільових сторінках, зібраних у конструкторі сторінок;
• сторінки помилок (404, «немає в наявності») із заголовком, який нічого не каже про помилку.

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

Автоматично: наш сканер повідомляє про сторінки без <title> або з порожнім (правило document title). Чи заголовок описовий — це судження людини, тож ця частина потребує ручної перевірки.

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

Як виправити

• Використовуйте шаблон заголовка: {назва сторінки чи товару} – {розділ} – {назва магазину}.
• Додавайте пошуковий запит і номер сторінки на сторінки пошуку й категорій з пагінацією.
• Дайте сторінкам помилок і підтверджень заголовки на кшталт «Сторінку не знайдено – Назва магазину» чи «Замовлення підтверджено – Назва магазину».
• В SPA задавайте document.title при кожній зміні маршруту.
• Більшість платформ (Shopify, WooCommerce, PrestaShop) дають змогу задати SEO-заголовки; описові заголовки допомагають і пошуковим системам.

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

• 2.4.6 Заголовки та маркування — заголовки мають описувати вміст.
• 2.4.4 Призначення посилання (в контексті) — текст посилання має казати, куди воно веде.
• Запустіть безкоштовну перевірку, щоб побачити, чи мають ваші сторінки заголовки.

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

Що вимагає WCAG 2.4.2?

Кожна вебсторінка повинна мати заголовок, що описує її тему чи призначення. У HTML це елемент title у head сторінки.

Чому сканер доступності каже, що заголовок не пройшов перевірку?

Зазвичай тому, що на сторінці немає елемента title або він порожній. Автоматичні інструменти можуть виявити лише це; вони не оцінять, чи наявний заголовок описовий.

Чи мають заголовки бути унікальними?

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

А що з односторінковими застосунками та кроками оформлення замовлення?

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