Рекомендована практика Пріоритет: Помірно
Рівні заголовків перескакують
Заголовки на сторінці перескакують рівні, наприклад з <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