Рекомендована практика Пріоритет: Помірно
На сторінці більше однієї шапки сайту
Сторінка містить дві чи більше областей шапки («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