Атрибут longdesc тега <img>
Описание
Атрибут longdesc позволяет указать URL документа с подробным текстовым описанием содержимого изображения. Хотя формально не устарел, на практике заменён более современными методами обеспечения доступности.
<img
src="complex-chart.png"
alt="График продаж по кварталам"
longdesc="chart-description.html"
width="600">
Современные альтернативы:
| Метод | Пример | Преимущества |
|---|---|---|
| ARIA-describedby | aria-describedby="chart-desc" |
Связь с элементом на странице |
| Подробный alt | alt="График показывает..." |
Не требует дополнительных запросов |
| Figcaption | <figcaption>Описание</figcaption> |
Видимое описание для всех |
Рекомендуемая реализация:
<figure aria-labelledby="chart-desc">
<img
src="sales-chart.png"
alt="Краткое описание графика"
width="800">
<figcaption id="chart-desc">
Подробное описание: На графике представлены квартальные продажи
за 2023 год с разбивкой по регионам. Первый квартал показал...
</figcaption>
<a href="full-description.html" class="sr-only">
Полное текстовое описание графика
</a>
</figure>
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
Рекомендации по доступности:
- Для сложных изображений всегда предоставляйте текстовую альтернативу
- Сочетайте краткий
altс подробным описанием в контексте - Используйте семантические элементы
<figure>и<figcaption> - Для интерактивных элементов добавьте ARIA-атрибуты
Ограничения и совместимость:
- Атрибут поддерживается браузерами, но редко реализуется пользователями
- Большинство скринридеров игнорируют longdesc
- Требует создания отдельного документа с описанием
- Современные методы доступности предпочтительнее
Примечание: Хотя атрибут longdesc сохраняется в спецификации HTML, на практике он был заменён более эффективными методами. WCAG 2.2 рекомендует предоставлять сложные описания либо в окружающем тексте, либо через видимые альтернативы на самой странице.