Чому alt-теги для зображень досі важливі

Alt-атрибут зображення — один із найстаріших елементів HTML, який існує з часів появи самого тегу <img>. І водночас один із найчастіше проігнорованих: на багатьох сайтах зображення або взагалі без alt, або з формальним текстом на кшталт "image1.jpg" чи просто порожнім значенням там, де воно не мало б бути порожнім.

Що таке alt-текст насправді

Alt (alternative text) — це текстовий опис зображення, який браузер показує, якщо картинка з якоїсь причини не завантажилась, і який озвучують програми зчитування екрана (скрінрідери) для людей з порушеннями зору. Технічно це просто атрибут: <img src="cat.jpg" alt="Руда кішка спить на підвіконні">.

Звучить як дрібниця, але alt-текст виконує одразу дві важливі функції — доступність і SEO — і обидві часто недооцінюють.

Доступність: це не опційна фіча

Для людини, яка користується скрінрідером, сайт без alt-текстів на змістовних зображеннях — це сайт із дірками в контенті. Скрінрідер або пропускає зображення мовчки, або в кращому разі зачитує назву файлу на кшталт "IMG 4521 крапка джейпег" — що не несе жодної інформації.

Якщо на сайті є інфографіка з даними, скріншот інтерфейсу з поясненням чи фото товару в інтернет-магазині — без alt-тексту частина відвідувачів просто не отримує цю інформацію взагалі. Це не гіпотетична ситуація: у багатьох країнах вимоги до доступності сайтів закріплені законодавчо (в ЄС, наприклад, діє European Accessibility Act), і ігнорування alt-текстів — пряме порушення базових стандартів доступності WCAG.

SEO: як пошукові системи "бачать" зображення

Google не вміє в буквальному сенсі "дивитися" на фото так, як людина. Alt-текст — один з головних сигналів, за допомогою якого пошукова система розуміє, що зображено на картинці, і це напряму впливає на:

• позиції в Google Images — пошук за зображеннями є значним джерелом трафіку для інтернет-магазинів і блогів;
• загальне розуміння теми сторінки — alt-тексти зображень враховуються як додатковий контекстний сигнал поряд з основним текстом;
• швидкість індексації нового контенту, де є багато візуального матеріалу.

Типові помилки

Порожній alt там, де він не мав бути порожнім. Значення alt="" — це не помилка сама по собі, а спеціальний прийом для суто декоративних зображень (рамка, орнамент, іконка без смислового навантаження) — він каже скрінрідеру "пропусти це зображення, воно не несе інформації". Але якщо так позначено фото товару чи важливу інфографіку — це вже проблема.

Напхом ключових слів. alt="купити кросівки київ дешево кросівки жіночі" — це не опис зображення, а спам, який шкодить і доступності, і SEO одночасно (Google розпізнає такі шаблони).

Alt, що дублює підпис під фото. Якщо під зображенням вже є текстовий підпис, alt не повинен буквально повторювати його слово в слово — краще, щоб він додавав опис самого візуального змісту.

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

Головне правило просте: опишіть зображення так, ніби розповідаєте про нього людині по телефону, яка його не бачить. Конкретно, без зайвих прикметників, з акцентом на те, що дійсно важливо в контексті сторінки. Для фото товару в магазині — колір, матеріал, ключова деталь. Для скріншота інтерфейсу — що саме на ньому показано і чому це важливо в статті. Для декоративних елементів — просто залиште alt="", і це буде правильним рішенням, а не недбалістю.

Перевірити стан справ на власному сайті нескладно: більшість інструментів аудиту (включно з безкоштовним Lighthouse у Chrome DevTools) одразу показують список зображень без alt-атрибутів чи з підозріло порожніми значеннями.

Скільки часу це реально займає

Виправлення alt-текстів — одна з тих задач, які здаються дрібними, але дають непропорційно великий ефект відносно витраченого часу. На сайт середнього розміру з кількома десятками зображень зазвичай іде кілька годин роботи: скласти список зображень без alt, визначити для кожного контекст (декоративне чи змістовне), написати короткий і точний опис. Це не потребує програміста — з таким завданням цілком може впоратись контент-менеджер чи власник сайту самостійно, якщо є доступ до адмінки чи CMS. Головне — не відкладати цю роботу "на потім", бо з кожним новим зображенням, доданим без alt, проблема лише накопичується.