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