Зображення повинні мати альтернативний текст

Переконайтеся, що всі інформативні <img> елементи мають короткий, описовий альтернативний текст, а декоративні зображення мають порожній атрибут alt="".

Способи додати альтернативний текст

• Атрибут alt: <img alt="кошик з продуктами" src="...">
• Атрибут aria-label: <img aria-label="кошик з продуктами" src="...">
• Атрибут aria-labelledby для посилання на інший елемент з описом.

Як писати хороший alt-текст

• Описуйте зміст, а не вигляд: «Графік зростання продажів за 2024 рік» замість «Графік».
• Декоративні зображення — використовуйте alt="", щоб скрінрідер їх пропускав.
• Кнопки-зображення — описуйте дію: alt="Пошук", alt="Закрити".
• Не починайте з «Зображення...» — скрінрідер вже оголошує, що це зображення.
• Складні зображення (графіки, діаграми) — додайте розгорнутий опис через aria-describedby.

Приклади

<!-- Інформативне зображення -->
<img src="logo.png" alt="Логотип компанії">

<!-- Декоративне зображення -->
<img src="divider.png" alt="">

<!-- Складне зображення з описом -->
<img src="chart.png" alt="Діаграма продажів" aria-describedby="chart-desc">
<p id="chart-desc">Продажі зросли на 25% за Q4 2024.</p>