Атрибут hidden тега <caption>

Описание

Атрибут hidden для элемента <caption> позволяет полностью скрыть заголовок таблицы. Это может быть полезно в случаях, когда заголовок нужен для доступности, но не должен отображаться визуально.

Пример использования:
<table> <caption hidden>Техническое описание таблицы (видно только скринридерам)</caption> <tr> <th>Видимый заголовок</th> <td>Данные</td> </tr> </table>
Аспект Поведение Особенности
Отображение Полностью скрывает элемент Эквивалентно display: none
Доступность Доступен скринридерам (зависит от реализации) Лучше использовать aria-label для таблицы
Семантика Сохраняет связь с таблицей Не удаляет из DOM

Практические сценарии:

1. Альтернатива с aria-label:
<table aria-label="Техническое описание таблицы"> <!-- Содержимое таблицы без видимого caption --> </table>
2. Условное отображение:
<table> <caption id="dynamicCaption" hidden>Дефолтное описание</caption> <!-- Содержимое таблицы --> </table> <button onclick="showCaption()">Показать описание</button> <script> function showCaption() { document.getElementById('dynamicCaption').hidden = false; } </script>

Рекомендации по доступности:

  • Для чисто декоративных таблиц используйте role="presentation"
  • Если заголовок скрыт, обеспечьте альтернативное описание
  • Избегайте скрытия важной семантической информации
  • Тестируйте со скринридерами (разное поведение в разных браузерах)

Сравнение методов скрытия:

<!-- Способ 1: атрибут hidden --> <caption hidden>Описание 1</caption> <!-- Способ 2: CSS display --> <caption style="display: none">Описание 2</caption> <!-- Способ 3: ARIA --> <caption aria-hidden="true">Описание 3</caption> <!-- Способ 4: визуальное скрытие --> <caption style="position: absolute; left: -9999px">Описание 4</caption>

Примечание: Хотя технически возможно скрывать заголовки таблиц, семантически корректнее либо показывать заголовок, либо использовать альтернативные методы описания таблицы через ARIA-атрибуты.