Рекомендуемая практика Приоритет: Умеренно
На странице больше одной шапки сайта
Страница содержит две или более областей шапки («banner»), например обычную шапку плюс отдельную липкую или мобильную копию либо рекламную полосу, размеченную как banner. Это рекомендуемая практика, выходящая за рамки уровня WCAG 2.2 AA, на который опираются законы о доступности.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи программ чтения с экрана переходят между областями страницы (шапка, меню, основное содержимое, подвал), как между главами, и ожидают ровно одну главу шапки с логотипом, поиском, аккаунтом и корзиной. Когда шапок две или больше, они слышат шапку в списке несколько раз, не понимают, какая из них настоящая, и могут дважды проходить одни и те же ссылки и кнопку корзины.
Кого это касается
- пользователи программ чтения с экрана
- незрячие покупатели
- люди, пользующиеся программой чтения с экрана на телефоне
Как исправить
Оставьте на странице только один <header> верхнего уровня или role="banner". Если тема выводит отдельные шапки для компьютера и телефона или копирует шапку для липкой панели, сделайте копию обычным <div> или скройте неактивную для всех через display:none или атрибут hidden. Уберите role="banner" с главных изображений и рекламных полос: маркетинговый баннер не является ориентиром banner.
В Shopify
Обычно причина в панели объявлений, копии липкой шапки или приложении, которое добавляет собственный <header> или role="banner". Проверьте группу секций шапки и layout/theme.liquid и замените лишний элемент на <div>; по коду приложения обратитесь к его разработчику.
В Shoptet (CZ)
Определяется шаблоном, который может выводить отдельные шапки для компьютера и телефона. Проверьте, исправляет ли это более новая версия шаблона; иначе сообщите в Shoptet или партнёру.
В PrestaShop
Обычно модуль (мегаменю, слайдер баннеров или липкая шапка) добавляет второй <header> или role="banner". Переопределите шаблон модуля в своей теме и замените его на <div>.
В WooCommerce
Конструкторы страниц часто выводят отдельные шапки для компьютера, телефона и липкой панели, и все они являются элементами <header>. Смените HTML-тег лишних шапок на <div>, если конструктор это позволяет, или исправьте header.php дочерней темы.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core landmark-no-duplicate-banner.
dequeuniversity.com, github.com, www.w3.org