Рекомендуемая практика Приоритет: Умеренно
Уровни заголовков перескакивают
Заголовки на странице перескакивают уровни, например с <h2> сразу на <h4>, и в структуре страницы появляются пробелы. Это рекомендуемая практика, а не требование WCAG уровня AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Пользователи программ чтения с экрана часто изучают страницу по заголовкам, как по оглавлению. Пропущенные уровни создают впечатление, что каких-то разделов не хватает, и мешают понять, как связаны описание товара, отзывы и информация о доставке.
Кого это касается
- пользователи программ чтения с экрана
- люди, перемещающиеся по заголовкам
- люди с когнитивными нарушениями
Как исправить
Используйте уровни заголовков для структуры, а не для размера текста: один <h1> для главной темы, <h2> для основных разделов, <h3> внутри них и так далее без пропусков. Если заголовок должен выглядеть меньше или больше, измените его стиль в CSS, а не уровень. Проверьте повторяющиеся блоки, например карточки товаров, боковые панели и футер: у них часто фиксированный уровень.
В Shopify
Уровни заголовков обычно жёстко прописаны в секциях и сниппетах темы, например в карточках товаров или заголовках футера. Измените теги в файлах Liquid; настройка размера заголовка в редакторе темы обычно меняет только вид, а не уровень.
В Shoptet (CZ)
В основном зависит от шаблона; уровнями вы управляете только в собственном текстовом содержимом. Используйте форматы заголовков в редакторе по порядку, а о проблемах шаблона сообщайте в Shoptet или партнёру.
В PrestaShop
Уровни задаются в .tpl-файлах темы и в модулях, например в списках товаров и блоках футера. Переопределите шаблоны в своей теме, чтобы уровни шли по порядку.
В WooCommerce
Задайте правильный уровень в редакторе блоков или конструкторе страниц; у большинства виджетов заголовков есть настройка уровня, отдельная от размера. Заголовки виджетов темы и названия товаров в списках могут потребовать изменений в дочерней теме.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core heading-order.
dequeuniversity.com, github.com, www.w3.org