Що таке альтернативний текст? Як використовувати елемент сторінки для зображень
- Альтернативний текст є важливим елементом дизайну веб-сторінки. Це короткий текстовий опис зображення на сторінці.
- Альтернативний текст використовується інструментами доступності для читання вголос описів зображень для незрячих або слабозорих відвідувачів і пошукових систем для кращого рейтингу веб-сторінок.
- Ви можете побачити альтернативний текст на будь-якій веб-сторінці, перевіривши HTML сторінки.
Альтернативний текст є компонентом дизайну веб-сторінки. Зокрема, це фраза або речення, що описує зображення на сторінці.
У сучасному дизайні веб-сторінки альтернативний текст не відображається для більшості користувачів, але він вважається важливою частиною хорошого веб-дизайну, і кожне зображення на сторінці повинно мати альтернативний текст, пов'язаний з ним.
Призначення альтернативного тексту
Альтернативний текст виконує дві основні цілі. Він використовується інструментами доступності для читання з екрана, щоб читати вголос описи зображень для сліпих, слабозорих або які потребують додаткової допомоги, щоб побачити вміст на сторінці. Хороший альтернативний текст необхідний для цих користувачів, щоб отримати задоволення від роботи на веб-сторінці.
Він також використовується Google та іншими пошуковими системами для розуміння вмісту зображення, яке може використовуватися для кращого ранжирування веб-сторінки в результатах пошуку.
Як додати альтернативний текст до зображення та побачити його в HTML
Додавання альтернативного тексту залежить від веб-дизайну або системи керування вмістом, що використовується для створення веб-сторінки. Загалом, інструмент надає поле для введення альтернативного тексту, коли зображення завантажується на веб-сторінку. У більшості випадків ви також можете відредагувати завантажене зображення, щоб додати або змінити альтернативний текст.
Ви можете додати альтернативний текст до будь-якого зображення за допомогою веб-дизайну або інструменту керування вмістом, наприклад WordPress.
Цей альтернативний текст потім кодується на сторінці в HTML. Ви можете побачити це в будь-якому веб-переглядачі за допомогою функції «Перевірити». Наприклад, у Chrome клацніть правою кнопкою миші зображення на веб-сторінці та виберіть «Перевірити» у спадному меню. У Firefox клацніть правою кнопкою миші та виберіть «Перевірити елемент». В обох випадках ви побачите вікно з HTML-кодом сторінки. Для зображення ви повинні побачити тег HTML із написом «alt=», за яким слідує опис альтернативного тексту.
Ви можете використовувати інструмент Inspect у веб-переглядачі, як-от Chrome, щоб побачити альтернативний текст, пов’язаний із зображенням на веб-сторінці.
Найкращі поради щодо альтернативного тексту
Фахівці з пошукової оптимізації (SEO) мають багато вказівок щодо дизайну веб-сторінки та елементів веб-сторінки, таких як альтернативний текст. Ви можете брати цілі уроки на цю тему. Але загалом можна дати кілька основних рекомендацій щодо альтернативного тексту. Ось деякі загальні вказівки щодо формування хорошого альтернативного тексту:
- Інструкції щодо довжини час від часу змінюються, але наразі ви повинні зберігати альтернативний текст менше ніж 100 символів, включаючи пробіли.
- Опишіть зображення чітко, точно і лаконічно.
- Не починайте альтернативний текст фразою на кшталт «Зображення…» або «Фото…». Просто опишіть те, що на зображенні.
- Не «наповнюйте» альтернативний текст ключовими словами, пов’язаними з веб-сторінкою, але будьте максимально конкретними. Це допомагає як незрячим відвідувачам, так і людям із вадами зору, а також Google.