Рекомендована практика Пріоритет: Незначно
Дві області сторінки звучать для програм зчитування однаково
На сторінці є кілька областей одного типу, наприклад два меню чи дві бічні панелі, без підпису, який їх розрізняє. Це рекомендована практика, яка виходить за межі рівня WCAG 2.2 AA, на який спирається закон.
Цей текст перекладено автоматично, носій мови його ще не вичитав.
Чому це важливо для ваших покупців
Користувачі програм зчитування екрана переходять між областями сторінки (шапка, меню, основний вміст, футер), як між розділами. Якщо у списку двічі звучить «навігація», вони не знають, де головне меню магазину, а де меню кабінету чи футера, тож відкривають не те й повертаються.
Кого це стосується
- незрячі люди, які користуються програмами зчитування екрана
- люди з когнітивними порушеннями, які користуються інструментами для читання
- люди, які користуються розширеннями браузера зі списком областей сторінки
Як виправити
Дайте кожному повторюваному орієнтиру унікальну доступну назву через aria-label або aria-labelledby, наприклад <nav aria-label="Головне меню"> і <nav aria-label="Футер">. Зробіть те саме для повторюваних <aside>, <section> чи <form>, які діють як орієнтири. Якщо елемент насправді не є окремою областю, краще приберіть його роль орієнтира.
У Shopify
Зазвичай меню в шапці, мобільне висувне меню та меню футера — це <nav> без підписів. Додайте aria-label до кожного <nav> у файлах секцій шапки й футера теми.
У Shoptet (CZ)
Зазвичай це походить від меню шаблону. Повідомте Shoptet або партнера; якщо дубльована область у власному HTML, який ви додали, підпишіть її там самостійно.
У PrestaShop
Зазвичай модуль меню, блоки посилань у футері та посилання кабінету виводять <nav> чи <section> без підпису. Додайте aria-label у перевизначеннях шаблонів модулів у темі.
У WooCommerce
Зазвичай це меню теми або області віджетів (кілька бічних панелей, кілька меню навігації). Додайте aria-label у шаблонах дочірньої теми або в налаштуваннях блоку навігації в редакторі блоків, якщо тема працює на блоках.
Стандарти
Це не критерій WCAG, а рекомендована практика, що робить сайт зручнішим.
Автоматична перевірка: правило axe-core landmark-unique.
dequeuniversity.com, github.com, www.w3.org