Рекомендована практика Пріоритет: Незначно
Шапка сайту вкладена в іншу область сторінки
Область шапки (орієнтир «banner» з логотипом, пошуком і кошиком) вкладена в іншу область, наприклад в основний вміст чи навігацію, замість того щоб стояти окремо вгорі сторінки. Це рекомендована практика, яка виходить за межі рівня WCAG 2.2 AA, на який спираються закони про доступність.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувачі програм зчитування екрана переходять між областями сторінки (шапка, меню, основний вміст, підвал), як між розділами книги. Коли шапку сховано всередині іншої області, перелік розділів плутається: покупець, який переходить до шапки, щоб дістатися пошуку, акаунта чи кошика, може потрапити не туди або взагалі не знайти шапку як окремий розділ.
Кого це стосується
- користувачі програм зчитування екрана
- незрячі покупці, які шукають пошук, акаунт чи кошик
Як виправити
Розмістіть <header> сайту (або елемент з role="banner") безпосередньо в структурі сторінки, поза <main>, <nav>, <aside> та будь-яким елементом з роллю орієнтира. Зазвичай причина в обгортці сторінки з role="main" чи role="navigation" навколо шапки або в role="banner", доданому до елемента всередині іншого орієнтира. <header> усередині <article> чи <section> допустимий, бо його не вважають шапкою сайту.
У Shopify
Зазвичай причина в layout/theme.liquid або у власній обгортці навколо групи секцій шапки, наприклад div з роллю орієнтира не на своєму місці. Винесіть шапку з цієї обгортки або приберіть зайву роль.
У Shoptet (CZ)
Визначається HTML-структурою шаблону. Перевірте, чи новіша версія шаблону це виправляє; інакше повідомте Shoptet або партнера.
У PrestaShop
Зазвичай це .tpl-файли макета теми, які підключають шапку. Переконайтеся, що блок шапки не лежить усередині елемента з role="main" чи іншою роллю орієнтира.
У WooCommerce
Зазвичай причина в header.php теми або в шаблоні шапки конструктора сторінок, який обгортає сторінку елементом з роллю орієнтира. Виправте це в header.php дочірньої теми або в шаблоні шапки конструктора.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core landmark-banner-is-top-level.
dequeuniversity.com, github.com, www.w3.org