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