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