Деякі розгортувані розділи не мають назви

Клікабельний заголовок розгортуваного розділу (елемент <summary>) не має тексту, який можна прочитати, наприклад акордеон з деталями товару, група фільтрів, питання в FAQ або меню, що відкривається іконкою.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі програм зчитування з екрана чують лише, що щось можна розгорнути, але не що саме. Вони можуть не знайти мобільне меню, фільтри чи інформацію про доставку й розміри.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана
користувачі голосового керування

Як виправити

Дайте кожному <summary> видимий текст, що описує розділ, наприклад «Доставка й повернення» або «Меню». Якщо в summary лише іконка, додайте до нього aria-label або візуально прихований текст усередині, а саму іконку позначте як декоративну через aria-hidden="true".

У Shopify

Трапляється часто: багато сучасних тем використовують <details> і <summary> для мобільного меню, пошуку, фільтрів та акордеонів товару. Перевірте файли Liquid шапки й секції товару на summary лише з іконкою і переконайтеся, що в кожному блоці акордеона заповнено заголовок.

У Shoptet (CZ)

Може траплятися в шаблонах або у власному HTML з розгортуваними розділами. Перевірте, чи є новіша версія шаблону з виправленням; якщо ні, попросіть Shoptet або партнера Shoptet додати підписи.

У PrestaShop

Трапляється, коли тема чи модулі використовують <details> для меню, фільтрів або вкладок товару. Додайте текст чи aria-label до <summary> у шаблонах .tpl теми або в перевизначених шаблонах модулів.

У WooCommerce

Трапляється рідше; буває в темах, блоках FAQ чи акордеонів і віджетах конструкторів сторінок, які використовують <details>. Заповніть заголовок блоку або додайте aria-label у шаблоні дочірньої теми; про проблеми плагіна повідомте його автора.

Стандарти

Стандарти
Стандарт	Пункт
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Автоматична перевірка: правило axe-core summary-name. dequeuniversity.com, github.com, www.w3.org

Усі правила, які ми перевіряємо