Рекомендована практика Пріоритет: Незначно
Клітинка заголовка таблиці порожня
У таблиці є клітинка заголовка без тексту, наприклад лівий верхній кут таблиці розмірів або стовпець із кнопками дій. Це рекомендована практика, а не вимога 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