Требование WCAG A/AA Приоритет: Серьёзно
У некоторых раскрывающихся разделов нет названия
Кликабельный заголовок раскрывающегося раздела (элемент <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
Похожие проверки
-
Вся страница скрыта от скринридеров
WCAG 1.3.1 A
-
Атрибуты доступности использованы в неподходящей ситуации
WCAG 4.1.2 A
-
У полей формы нет подписей
WCAG 4.1.2 A
-
У некоторых индикаторов прогресса нет названия
WCAG 1.1.1 A