Рекомендуемая практика Приоритет: Незначительно
Ячейка заголовка таблицы пустая
В таблице есть ячейка заголовка без текста, например левый верхний угол таблицы размеров или столбец с кнопками действий. Это рекомендуемая практика, а не требование WCAG уровня AA.
Этот текст переведён автоматически, носитель языка его ещё не вычитал.
Почему это важно для ваших покупателей
Когда пользователь программы чтения с экрана движется по таблице, перед каждым значением зачитывается заголовок, объясняющий его смысл. Пустой заголовок оставляет значения без контекста, и таблицу размеров, сравнение цен или историю заказов труднее понять.
Кого это касается
- пользователи программ чтения с экрана
- незрячие люди
- слабовидящие люди, использующие экранную лупу с озвучиванием
Как исправить
Дайте каждому <th> (или элементу с role="columnheader" либо "rowheader") текст, описывающий его столбец или строку, например «Размер» или «Действия». Если текст не должен быть виден, используйте визуально скрытый текст вместо пустой ячейки. Если ячейка на самом деле не заголовок, например пустой угол таблицы, используйте <td> вместо <th>.
В Shopify
Таблицы обычно берутся из описаний товаров, страниц с таблицами размеров или приложений. Отредактируйте таблицу в текстовом редакторе или приложении, чтобы у каждой ячейки заголовка был текст; для таблиц, которые строит тема, исправьте шаблон Liquid.
В Shoptet (CZ)
Обычно это таблицы в описаниях товаров или на текстовых страницах. Отредактируйте таблицу в редакторе и заполните ячейки заголовка; по таблицам в самом шаблоне обратитесь в Shoptet или к партнёру.
В PrestaShop
Может появляться в описаниях товаров, на страницах сравнения и в шаблонах аккаунта клиента. Отредактируйте содержимое в админ-панели или переопределите .tpl-файл темы.
В WooCommerce
Часто встречается в плагинах таблиц размеров, сравнений и таблиц, а также на страницах аккаунта, например в истории заказов. Заполните заголовок в настройках плагина или переопределите шаблон в дочерней теме.
Стандарты
Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.
Автоматическая проверка: правило axe-core empty-table-header.
dequeuniversity.com, github.com, www.w3.org