Зображення допомагають пояснити матеріал, показати результат роботи або зробити сторінку зрозумілішою. Проте не кожен відвідувач бачить їх однаково: картинка може не завантажитися, бути недоступною для людини зі скрінридером або втратити значення на повільному з’єднанні. Атрибут alt дає текстову альтернативу зображенню. Його перевірка корисна після зміни теми, перенесення сайту, масового завантаження фото та редизайну шаблонів.
Що таке alt-текст і для чого він потрібен
Alt-текст — це значення атрибута alt у HTML-елементі <img>. Він має коротко передавати зміст або функцію зображення, коли сам файл не може бути використаний. Для фотографії товару доречно описати товар і важливу видиму деталь, для схеми — її призначення, а для кнопки-зображення — дію, яку виконує посилання.
Не всі зображення потребують однакового підходу. Якщо картинка не додає змісту й використовується лише як декоративний елемент, порожній alt="" може бути коректнішим, ніж випадковий опис. Якщо зображення є посиланням або містить текст, альтернатива має пояснити його функцію. Головний критерій — відповідність реальному контексту, а не механічне додавання ключових слів.
Як знайти проблеми на публічній сторінці
Почніть із кількох типових URL: головної, статті, сторінки послуги, категорії та, якщо є, картки товару. Відкрийте вихідний код або скористайтеся інструментами розробника браузера. Знайдіть елементи <img> та подивіться, чи мають вони атрибут alt. Відсутній атрибут і порожнє значення — різні ситуації, тому їх потрібно розрізняти під час аудиту.
Перевірте не лише зображення в тексті, а й логотип, обкладинку запису, аватар автора, іконки карток та зображення в підвалі сайту. Частина з них може генеруватися шаблоном, тому проблема повторюватиметься на десятках сторінок. Окремо перегляньте картинки, які додаються через редактор контенту: редактор і тема можуть обробляти їх по-різному.
Зручно почати з одного типу сторінок і порівняти кілька записів між собою. Якщо HTML у них має однакову структуру, проблема, ймовірно, пов’язана із шаблоном. Якщо атрибут відсутній лише в окремому матеріалі, перевірте його медіафайл і поля в редакторі. Такий поділ допомагає не витрачати час на ручне редагування кожної сторінки, коли причина знаходиться на рівні загального компонента.
Яким має бути корисний опис
Хороший alt-текст відповідає на просте питання: що потрібно знати про це зображення, якщо його не видно? Описуйте предмет, дію та важливу ознаку, але не переповідайте весь абзац навколо картинки. Якщо зображення показує процес перевірки форми заявки, достатньо вказати, що на екрані зображено форму заявки та її поля. Якщо на фото немає змістовної деталі, не вигадуйте її.
Уникайте шаблонних фраз на кшталт «зображення» або «фото», якщо вони нічого не додають. Не вставляйте в alt список ключових слів і не дублюйте заголовок сторінки без причини. Для зображень із текстом важливо передати сам текст або його функцію, якщо це потрібно для розуміння матеріалу. Для графіка можна коротко назвати показник, період і головний висновок, але тільки коли ці дані справді видно на графіку.
Опис має бути достатнім, але не перевантаженим. Не потрібно повторювати в ньому речення, яке вже повністю пояснює картинку поруч. Натомість зверніть увагу на функціональні зображення: якщо банер веде на сторінку послуги, альтернативний текст може пояснювати саме ціль переходу. Для логотипа зазвичай достатньо назви організації, якщо це відповідає його ролі на сторінці.
Практичний чекліст для сайту
Зафіксуйте знайдені проблеми в таблиці або нотатках і перевірте кожен тип шаблону за такими пунктами:
- у змістовних зображень є описова текстова альтернатива;
- декоративні картинки не створюють зайвого шуму для допоміжних технологій;
- alt відповідає зображенню та абзацу, поруч із яким воно розміщене;
- немає переліку ключових слів, службових назв файлів або зайвих повторів;
- зображення-посилання описують дію або ціль переходу;
- після змін у редакторі та шаблоні перевірено сторінку без авторизації.
Якщо сторінка має багато зображень, почніть із шаблонних елементів і найвідвідуваніших URL, а потім переходьте до старого контенту. Перевірте також мобільну версію: інше компонування може змінити контекст картинки або приховати текст поруч із нею. Після виправлень відкрийте кілька сторінок у приватному вікні та переконайтеся, що в HTML з’явилися саме очікувані значення.
Не редагуйте описи масово одним шаблоном, якщо зображення різні за змістом. Краще спочатку визначити правила для кожного типу контенту, а потім перевірити вибірку вручну. Це зменшує ризик замінити відсутній alt однаковим текстом, який не пояснює конкретну картинку. Після великого оновлення збережіть кілька перевірених URL як контрольну вибірку для наступного аудиту.
Висновок
Alt-тексти — невелика частина HTML, яка впливає на зрозумілість сторінки в різних сценаріях використання. Перевіряйте їх після оновлення теми, редактора, медіатеки або шаблонів і оцінюйте не лише наявність атрибута, а й точність опису. Якщо потрібно провести ширший технічний огляд сторінок, перегляньте матеріал про технічний SEO-аудит. Коли помилки повторюються в шаблонах або великій медіатеці, AriZone може допомогти скласти послідовний план перевірки.
Залиште коментар