Атрибут hidden тега <figcaption>
Описание
Атрибут hidden в теге <figcaption> скрывает подпись к изображению или другому медиа-контенту. Это булевый атрибут - его наличие (без значения) делает элемент невидимым и недоступным для пользователя.
<figure>
<img src="diagram.png" alt="Схема процесса">
<figcaption hidden>
Рисунок 1. Детальная схема рабочего процесса
</figcaption>
</figure>
Особенности работы:
| Состояние | Визуальный эффект | Доступность |
|---|---|---|
| hidden присутствует | Элемент полностью скрыт | Не доступен для пользователя и скринридеров |
| hidden отсутствует | Обычное отображение | Полная доступность |
Пример динамического управления:
<figure id="toggle-figure">
<img src="chart.jpg" alt="Статистика">
<figcaption id="figure-caption">
Рисунок 2. Сравнительный анализ показателей
</figcaption>
</figure>
<button onclick="toggleCaption()">Переключить подпись</button>
<script>
function toggleCaption() {
const caption = document.getElementById('figure-caption');
caption.hidden = !caption.hidden;
}
</script>
Сравнение с CSS display:none:
<style>
.visually-hidden {
display: none;
}
</style>
<!-- HTML-скрытие -->
<figcaption hidden>Скрыто атрибутом</figcaption>
<!-- CSS-скрытие -->
<figcaption class="visually-hidden">Скрыто CSS</figcaption>
Рекомендации по использованию:
- Используйте для временного скрытия подписей
- Не применяйте для важной информации
- Для постоянного скрытия предпочтительнее CSS
- Сочетайте с aria-атрибутами при необходимости
Ограничения:
- Не поддерживается в IE10 и ранее
- Менее гибкий, чем CSS-решения
- Не анимируется (в отличие от opacity/visibility)
- Не влияет на SEO (скрытый контент индексируется)
Примечание: Хотя атрибут hidden удобен для быстрого скрытия элементов, для сложных сценариев управления видимостью лучше использовать CSS или JavaScript. Убедитесь, что скрытие подписи не ухудшает понимание контента.