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