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 есть ошибка?

Обычно потому, что на странице нет элемента title или он пустой. Автоматические инструменты могут обнаружить только это; оценить, понятен ли существующий заголовок, они не могут.

Должны ли заголовки быть уникальными?

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

Как быть с одностраничными приложениями и шагами оформления заказа?

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