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.
• Делайте подписи конкретными: «Адрес электронной почты», «Номер телефона (для курьера)», «Код скидки».
• Используйте настоящие элементы заголовков для названий разделов, а для оформления — обычный стилизованный текст.

Связанные критерии

• 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.

Что такое подпись (label) в WCAG?

Текст или другой компонент с текстовой альтернативой, который показывается всем пользователям и идентифицирует компонент, например видимый текст рядом с полем формы. Это не только HTML-элемент label.