Перейти к содержимому
Pandus

Рекомендуемая практика Приоритет: Незначительно

Заголовки таблицы неправильно используют атрибут scope

Таблица неправильно использует атрибут scope, например на обычной ячейке с данными или со значением, отличным от row, col, rowgroup или colgroup. Это рекомендуемая практика сверх уровня WCAG 2.2 AA.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Скринридеры по scope определяют, какой заголовок относится к какой ячейке. Если он задан неверно, человек, который слушает таблицу размеров, цен или доставки, может услышать не тот заголовок или вовсе никакой и выбрать не тот размер или вариант.

Кого это касается

  • пользователи скринридеров
  • незрячие и слабовидящие покупатели

Как исправить

Используйте scope только на ячейках заголовков <th> и только со значениями col, row, colgroup или rowgroup. Уберите scope с ячеек <td>; если ячейка действительно заголовок, превратите её в <th>. Простой таблице с одной строкой заголовков scope обычно вообще не нужен.

В Shopify

Таблицы обычно попадают из описаний товаров или страниц, созданных в визуальном редакторе, или из приложения таблицы размеров. Исправьте HTML в режиме кода редактора или обратитесь к разработчику приложения.

В Shoptet (CZ)

Обычно это описания товаров или тексты страниц. Исправьте HTML таблицы в режиме исходного кода редактора; по поводу таблиц из шаблона обратитесь в Shoptet или к партнёру.

В PrestaShop

Обычно это описания товаров, отредактированные в админке, или шаблоны модуля. Исправьте HTML в описании или переопределите шаблон модуля в теме.

В WooCommerce

Обычно это описания товаров, плагин таблиц или тема. Отредактируйте HTML таблицы в режиме кода редактора или измените настройки заголовков в плагине таблиц.

Стандарты

Это не критерий WCAG, а рекомендуемая практика, которая делает сайт удобнее.

Автоматическая проверка: правило axe-core scope-attr-valid. dequeuniversity.com, github.com, www.w3.org

Все правила, которые мы проверяем