Атрибут longdesc тега <img> — адреса докладного опису
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<img longdesc=”URL”>Атрибут longdesc може отримувати єдине значення:
-
URL -
Гіперпосилання на розширений опис зображення. Можливі значення:
- id іншого елемента.
- Абсолютний URL - вказує на інший веб-сайт (наприклад, longdesc = "http://www.example.com/description.txt").
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, longdesc = "description.txt").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
longdesc вказував адресу розгорнутого опису зображення для незрячих. Атрибут вилучено з HTML, скрінрідери його майже не читають — сучасний шлях: видиме посилання поруч або aria-describedby. Тут опис просто на сторінці, і longdesc посилається на нього якорем.
<img src="/img/logo.svg" width="100" alt="Лого css.in.ua" longdesc="#opys">
<p id="opys">Розгорнутий опис: синій логотип довідника css.in.ua у векторному форматі.</p>Три способи описати той самий графік. Перший — атрибутом longdesc: на екрані немає нічого, хоча селектор img[longdesc] картинку ловить і жовта рамка доводить, що атрибут на місці. Другий — видиме посилання поруч. Третій — <figure> з підписом і розгорнутим текстом під ним. Побачити перший спосіб у дії неможливо в принципі — саме тому його й прибрали.
HTML
<p class="head bad">1. longdesc — атрибут є, дістатися його нема як</p>
<img class="hrafik" width="300" height="120" alt="Графік продажів за півріччя"
longdesc="opys-hrafika.html"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23f6f9ff'/%3E%3Cpolyline%20points='10,105%2060,80%20110,85%20160,45%20210,30%20260,35'%20fill='none'%20stroke='%232f6fd0'%20stroke-width='3'/%3E%3C/svg%3E">
<p class="note">Жовта рамка вище намальована селектором img[longdesc] — тобто
атрибут на місці. І це все, що з ним можна зробити.</p>
<p class="head good">2. Видиме посилання поруч — помагає всім</p>
<img class="hrafik ok" width="300" height="120" alt="Графік продажів за півріччя"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23f3fbf4'/%3E%3Cpolyline%20points='10,105%2060,80%20110,85%20160,45%20210,30%20260,35'%20fill='none'%20stroke='%233a9a4f'%20stroke-width='3'/%3E%3C/svg%3E">
<p><a href="#opys">Докладний опис графіка</a></p>
<p class="head good">3. figure з підписом і текстом під ним</p>
<figure>
<img width="300" height="120" alt="Графік продажів за півріччя"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='120'%3E%3Crect%20width='300'%20height='120'%20fill='%23f3fbf4'/%3E%3Cpolyline%20points='10,105%2060,80%20110,85%20160,45%20210,30%20260,35'%20fill='none'%20stroke='%233a9a4f'%20stroke-width='3'/%3E%3C/svg%3E">
<figcaption>Продажі, січень — червень 2026 року</figcaption>
</figure>
<p class="opysovyi">Продажі зростали з січня по травень із провалом у березні,
у травні вийшли на поличку й далі майже не змінювалися. Найбільший місячний
приріст — квітень, найменший — березень.</p>CSS
.head {
margin: 22px 0 8px;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.head.bad {
color: #c0392b;
}
.head.good {
color: #1b5e20;
}
.hrafik {
display: block;
outline: 2px dashed #e0a800;
outline-offset: 3px;
}
/* Селектор бачить атрибут — на цьому все й закінчується. */
img[longdesc] {
outline-color: #e0a800;
}
.ok {
outline: 2px solid #3a9a4f;
}
figure {
max-width: 320px;
margin: 0;
padding: 8px;
border: 2px solid #3a9a4f;
border-radius: 6px;
background: #f3fbf4;
}
figure img {
display: block;
}
figcaption {
margin-top: 6px;
color: #1b5e20;
font-size: .9em;
font-weight: 600;
}
.note {
max-width: 400px;
margin: 8px 0 0;
color: #8a6100;
font-size: .9em;
}
.opysovyi {
max-width: 460px;
margin-top: 10px;
font-size: .9em;
line-height: 1.7;
}Коментарі
Коментарів ще немає — будьте першим!