Рекомендуемая практика Приоритет: Незначительно
Шапка сайта вложена в другую область страницы
Область шапки (ориентир «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