Атрибут abbr тега <th>

Описание

Атрибут abbr в теге <th> позволяет указать сокращённую версию заголовка таблицы. Это особенно полезно для скринридеров, которые могут озвучивать сокращение вместо полного текста в повторяющихся случаях.

Пример использования:
<table> <tr> <th abbr="№" scope="col">Номер заказа</th> <th abbr="Дата" scope="col">Дата оформления</th> </tr> <tr> <td>1425</td> <td>15.08.2023</td> </tr> </table>

Особенности работы:

  • Используется исключительно для целей доступности
  • Не влияет на визуальное отображение таблицы
  • Скринридеры могут использовать его для краткого представления
  • Особенно полезен для длинных заголовков столбцов

Рекомендации:

  • Используйте для длинных заголовков столбцов
  • Сочетайте с атрибутом scope
  • Сокращение должно быть понятным без контекста
  • Тестируйте с различными скринридерами

Пример с длинным заголовком:

<table> <tr> <th abbr="Кол-во" scope="col">Количество товаров в заказе</th> <th abbr="Сумма" scope="col">Общая сумма заказа с учётом скидки</th> </tr> <tr> <td>5</td> <td>1249₽</td> </tr> </table>

Ограничения:

  • Не все скринридеры одинаково обрабатывают этот атрибут
  • Не заменяет семантическую разметку таблицы
  • Браузеры не отображают это значение пользователю

Примечание: Для проверки работы атрибута используйте:

  • NVDA с Firefox
  • VoiceOver с Safari
  • JAWS с Chrome