Остаточний посібник з написання ефективного альтернативного тексту для доступності та SEO

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

Alt-текст також підтримує видимість у пошуку. Він дозволяє пошуковим системам розуміти контент на вашому сайті та індексувати зображення, пов’язані з навколишнім описом. Добре складений опис може забезпечити тисячу пошуків і з’єднати користувачів з правильними продуктами або функцією. Хороший alt-текст сприяє доступності, посилює користувацький досвід і допомагає пошуковим сигналам узгоджуватися з контекстом сторінки. Тримайте мову простою, уникайте безладдя та дозвольте зображенню описувати себе в контексті сторінки.

Рекомендація: Для кожного зображення напишіть конкретний опис, який зазначає суб’єкт, дію та контекст. Для продуктів назвіть продукт, колір і основну функцію. Використовуйте точні терміни замість загальних міток і перевірте документацію, щоб зберегти узгодженість із стратегією контенту сайту. Найефективніший alt-текст збагачує сторінку, а не повторює те, що вже сказано в навколишньому тексті.

Приклад для зображень дикої природи: чичерниці, що сидять на гілці біля годівниці. Alt-текст може звучати: "Дві чичерниці сидять на гілці біля годівниці для птахів у саду." Це чітко передає сцену та допомагає користувачам зрозуміти зображення, не бачачи його. Деякі зображення можуть показувати лише малу функцію; опишіть її функцію в контексті, наприклад, "іконка чичерниці, що сидить на гілці в заголовку сайту."

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

Повний посібник з написання alt-тексту для доступності та SEO; Коли використовувати alt-текст

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

Щодо того, що описувати, зосередьтеся на контенті та функції. Якщо зображення декоративне і не додає значення, опустіть alt-текст або встановіть порожній атрибут alt, щоб воно не переривало потік на екрані.

Використовуйте alt-текст для зображень, які передають інформацію: діаграми, графіки, фото, логотипи або будь-які візуали, що сприяють повідомленню. Якщо діаграма показує тенденції в графіках Excel, опишіть осі та лінію тенденції; якщо сцена пустелі чи фото птаха є фокусом, зазначте суб’єкт і сетинг. Коли кольори несуть значення, згадайте їх (наприклад, білий фон з жирною лінією). Якщо в зображенні з’являються тварини, такі як синички, опишіть тварину та її дію. Тримайте рядки простими та уникайте опису кожного пікселя. Для великих діаграм надайте короткий опис і посилання на довшу нотатку чи посібник нижче.

Два практичні приклади ілюструють ремесло: "Птах сидить на панелі з білою рамкою над ландшафтом пустелі" та "Графік з Excel показує зростання продажів у Q2 на 14%." Якщо зображення містить текст, включіть точні слова в лапках (лапки навколо сказаного тексту уточнюють намір). Для декоративної іконки чи кнопки використовуйте коротку мітку, як "Іконка пошуку" чи "Іконка документа Word", щоб зберегти плавну навігацію.

Примітка для творців: практикуйтеся з різноманітним набором візуалів і тримайте узгоджений стиль. Цей посібник підтримує інформативні описи, допомагає глядачам, які покладаються на скрінрідери, і надає чітку базу для проєктів – чи працюєте ви над веб-сайтом, блогом чи сторінкою продукту. Використовуйте реальні приклади, переглядайте з колегами та створюйте просту таблицю Excel для відстеження змін і відображення стабільної функції серед активів.

У HTML alt-текст з’являється в атрибуті alt елемента img. Автоматичний alt-текст може допомогти, але його слід перевірити на точність, оскільки контекст важливий. Якщо зображення декоративне, опустіть alt-текст, щоб допоміжні технології зосередилися на значущому контенті. Поєднуйте alt-текст з довшим описом на пов’язаній сторінці, коли потрібно, щоб охопити складні візуали, графіки чи діаграми.

Коли додавати alt-текст: Обсяг, Тригери та Практичні рекомендації

Додавайте стислий alt-текст до кожного зображення з значенням під час часу публікації або під час оновлення контенту; це допомагає користувачам, які покладаються на допоміжні технології, покращує SEO для сайтів і пояснює роль зображення в статті.

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

Тригери: додавайте або оновлюйте alt-текст, коли пишете нове зображення, замінюєте медіа або повторно використовуєте активи на сайтах; перевірте, щоб alt-текст відповідав тому, що показано, особливо для діаграм і графіків, і забезпечте узгодженість із навколишнім потоком контенту.

Практичні рекомендації: тримайте alt-текст стислим; для базових об’єктів описуйте функцію чи мету в 1-2 коротких фразах; для діаграм пояснюйте функцію та основний потік; для графіків підсумовувати тенденцію чи ключові значення; для зображень, що містять видимий текст, показуйте цей текст в описі alt; є випадки, коли загальний опис не підійде – там надайте конкретний alt, який захоплює значення; для декоративних зображень чи неясних візуалів використовуйте порожній alt або коротку нотатку, яка відображає їхню інформаційну роль.

Перегляд і співпраця: творці повинні перевіряти з редакторами та дизайнерами, тестувати alt-текст з реальними користувачами та перевіряти, що значення зберігається на пристроях. Використовуйте базовий чекліст, щоб підтвердити охоплення для статті та забезпечити сильну доступність.

Визначення alt-тексту: Що описувати та що виключати

Опишіть зображення в одному стислому реченні, яке передає його мету, потім додайте інформативний опис, який охоплює основні суб’єкти та контекст. Включіть хто або що з’являється, будь-які дії та сетинг, щоб допомогти користувачеві зрозуміти все показане.

• Що описувати
  • Суб’єкти та дії: ідентифікуйте людей, тварин (наприклад, чичерниці, що сидять на гілці), або об’єкти, такі як бренди, продукти чи інструменти.
  • Текст у зображенні: транскрибуйте цитати чи короткі фрази точно так, як вони з’являються, включаючи числа чи дати.
  • Контекст і мета: поясніть, чому зображення існує в цьому записі та що воно передає про навколишній контент.
  • Бренд і стилістика: назвіть бренд і зазначте візуальний стиль чи іконографію, якщо це уточнює значення.
  • Графічний контент: для графіків чи діаграм підсумовувати тенденцію, мітки, осі та ключові точки даних.
  • Продукти та пропозиції: опишіть продукт, модель, колір та будь-які видимі пропозиції чи знижки.
  • Кольори, макет і композиція: згадайте домінуючі кольори, якщо вони впливають на розуміння, а також будь-які видимі cues макету.
  • Місцезнаходження та час: включіть, де відбувається сцена та коли, якщо це релевантно.
  • Довжина та тон: тримайте інформативним і нейтральним, обираючи мову, яка відповідає очікуванням користувача.
  • Потік і читабельність: структуруйте опис так, щоб скрінрідер міг природно слідувати, уникаючи розірваних фраз.
• Що виключати
  • Декоративні зображення: якщо зображення не надає інформативного контенту, використовуйте порожній атрибут alt (порожній) або позначте як декоративне.
  • Надмірні деталі: пропустіть квітущу чи надмірну мову, яка не допомагає розумінню.
  • Неінформативні візуали: уникайте опису фонового шуму чи нерелевантної атмосфери, якщо це не змінює інтерпретацію.
  • Нерелевантний контекст: виключіть тангенціальні теми, невидимі в зображенні.
  • Дубльовані описи: не переказуйте інформацію, вже передану навколишнім текстом.
• Практичні рекомендації
  • Рекомендації: дотримуйтеся практик, дружніх до WCAG, і переглядайте проти цілей доступності та SEO.
  • Довжина: цільте на близько 125–160 символів для стандартних зображень; довгі описи можуть знадобитися для складних діаграм чи сцен з важким потоком.
  • Вибір термінів: обирайте мову, яка узгоджується з голосом бренду та очікуваннями споживача, включаючи назви продуктів і пропозицій, коли видимі.
  • Узгодженість: тримайте стабільний стиль серед записів, тегуючи релевантні деталі, як бренд, продукт і колір, де доречно.
  • Перегляд: тестуйте alt-текст з швидким переглядом, щоб забезпечити пояснення всього суттєвого без зайвого.
• Приклади та підхід
  • Приклад запису: "Чичерниці сидять на сосновій гілці на заході сонця; м’яке блакитне небо та соснові голки навколо; видимий стікер бренду на годівниці."
  • Приклад графіка: "Лінійний графік, що показує щомісячні продажі до Q3, з осями, поміченими Revenue (USD) і Month, закодованими кольорами за категорією продукту."
  • Приклад цитат: "Зображення показує цитату 'Limited time offer' з червоним бейджем; включайте точне формулювання, якщо воно керує діями користувача.
  • Описовий підхід: поясніть все, що помітив би зрячий користувач, потім перевірте з навколишнім посібником чи нотатками перегляду.
• Тримайте actionable
  • Узгодженість запису та опису: кожен запис зображення повинен мати описовий alt-текст, що відповідає видимому контенту та меті.
  • Потік і стислість: створюйте речення, які читаються плавно, уникаючи безладдя та тримаючи опис інформативним.
  • Випадки довгої форми: для складних візуалів надайте довший опис, що пояснює відносини та результати, потім підсумовувати стислим реченням alt.
• Швидкий чекліст
  • Чи пояснює воно мету зображення? Так/Ні
  • Чи всі суттєві елементи описані (включаючи цитати чи пропозиції)? Так/Ні
  • Чи декоративний контент позначений порожнім? Так/Ні
  • Чи тон нейтральний та інформативний? Так/Ні

Опис візуального контенту для скрінрідерів: Конкретні шаблони фраз

Почніть з об’єкта та його дії, потім додайте контекст у стислому рядку. Це допомагає читачеві зрозуміти сцену одним поглядом і тримає ритм читання стабільним, навіть коли контент складний, як графік чи діаграма.

Обирайте шаблони за типом контенту: графіки та діаграми, зображення, елементи керування, таблиці даних і декоративні елементи. Для графіків назвіть метрику, часовий проміжок і тенденцію; для зображень ідентифікуйте суб’єкт та його фон чи деталі; для елементів UI вкажіть мітку та дію. Використовуйте фрази, які читач може сканувати, не довгі абзаци, що затемнюють значення.

У SharePoint та активах бренду тримайте узгодженість, повторно використовуючи невеликий набір конкретних шаблонів. Andrée, відома адвокатка доступного контенту, демонструє, як ці фрази поєднуються з короткими, точними підписами, щоб підтримувати швидке читання та легкий пошук. Тримайте підписи дружніми до читача, не багатослівними, і редагуйте для ясності, коли вдосконалюєте свій alt-текст у процесі перегляду.

Шаблон	Приклад	Примітки
Графік/Діаграма: об’єкт + метрика + період + тенденція	Графік показує зростання продажів у Q2 від 1,000 до 1,500 одиниць під час періоду Q2	Називає графік, метрику, діапазон у тисячах, якщо потрібно; уникайте заповнювачів.
Зображення/Ілюстрація: суб’єкт + фон + деталі	Фото продукту показує бренд на білому фоні з деталями упаковки	Зосереджується на суб’єкті та контексті; фон уточнює розміщення; згадайте ключові деталі лише.
Елемент UI керування: мітка + дія	Натисніть “Edit”, щоб відкрити поля елемента	Використовуйте фактичну мітку; виділяйте цільові поля; тримайте actionable.
Таблиця даних: поля + значення + період	Таблиця перелічує поля: Sales, Region, Period; значення показують загальні суми в тисячах одиниць	Перетворює табличні дані в лінійне речення; включайте період, коли релевантно.
Декоративний/пробіл: декоративний елемент + статус alt	Декоративна лінія пробілу: alt-текст порожній	Використовуйте порожній, коли елемент додає макет, не контент; уникайте опису візуалів, що не передають значення.
Наративний підпис: випадок + читання + пошук	У цьому випадку читач може сканувати підсумок під час читання, використовуючи пошук для розташування ключових термінів	Надайте швидкий якір для суті та дозвольте отримання на основі термінів.
Люди: ім’я + роль + дія	Andrée переглядає графік, щоб підтвердити точність даних	Використовуйте правильні імена та ролі для орієнтації читача; capitalized імена доречно.

Розгляди SEO: Балансування ключових слів без набивання

Рекомендація: Зосередьтеся на ясності спочатку; включіть одне первинне ключове слово, яке точно відображає зображення, і додайте підтримуючі терміни лише коли вони покращують значення для користувачів. Цей посібник надає практичні рекомендації для письменників, щоб балансувати SEO та доступність в alt-тексті.

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

Alt-текст може бути довшим для складних діаграм, але тримайте основне значення недоторканим і уникайте заповнювачів.

• Рекомендації для первинного ключового слова: Визначте одне релевантне ключове слово і розмістіть його на початку alt-тексту, коли контент зображення дозволяє.
• Природна мова: Пишіть alt-текст як речення чи стислу фразу, яку міг би сказати користувач; цей стиль письма покращує читабельність для користувачів з інвалідністю та допомагає пошуковим системам інтерпретувати контекст.
• Ліміт слів: Цільте на 125 символів або менше; це запобігає набиванню ключовими словами та тримає текст читабельним, все ще підтримуючи пошуковий намір.
• Вибір, орієнтований на контекст: Розглядайте розділ і ситуацію; для діаграм описуйте дані чи потік; для фото ідентифікуйте суб’єкт і дію; для іконок пояснюйте дію чи значення.
• Наслідки посилань і кліків: Якщо зображення є посиланням, опишіть пункт призначення та що відбувається при кліку, щоб допомогти користувачам вирішити продовжити.
• Декоративні зображення: Використовуйте порожній атрибут alt (alt="") для візуалів, що не сприяють інформації; це мінімізує безглуздий шум для скрінрідерів.
• Підхід чекліста: Стосовно кожного alt-тексту як частини процесу на основі чекбоксів у вашому робочому процесі; це допомагає командам схвалювати та відстежувати зміни.
• Тестування та зворотний зв’язок: Тестуйте зі скрінрідерами, збирайте ввід від розробників і користувачів, і схвалюйте зміни, що покращують розуміння.
• Яка мета: Завжди запитуйте, яка мета зображення в навколишньому контенті, і забезпечте, щоб alt-текст відображав цю мету без надмірності.
• Вибір слів і білий простір: Віддавайте перевагу точним термінам над заповнювачами; тримайте спокійний ритм і використовуйте достатньо білого простору навколо тексту для допомоги скануванню.

Тут, щоб допомогти вам, стислий довідник для письменників: узгоджуйте alt-текст із контекстом контенту і використовуйте цей посібник, щоб покращити доступність статті та баланс SEO.

Натисніть тут, щоб побачити чекліст.

Підсумок: Цей підхід покращує читабельність статті, підтримує користувачів з інвалідністю та зберігає зв’язок між alt-текстом і релевантністю сторінки, не жертвуючи продуктивністю.

Alt-текст для різних типів зображень: Фото, Діаграми, Логотипи, Інфографіки

Міткуйте фото стислим, орієнтованим на суб’єкт alt-текстом, який описує хто або що в кадрі та чому це важливо на сторінці. Пишіть для користувачів допоміжних технологій і узгоджуйте опис із сусіднім копі, щоб читачі знали мету зображення.

Фото: Почніть з основного суб’єкта, потім додайте контекст, як сетинг і дія. Тримайте довжину тісною, цільте на 90–120 символів. Якщо з’являється шумар чи інший аудіо-сигнал, зазначте його в дужках. Якщо зображення містить промову, включіть короткий уривок цитати – і оточіть лапками. Приклад: "Вчитель пише на дошці, поки учні слухають." Цей підхід допомагає користувачам знати весь момент і підтримує пошук та навігацію. Чіткий опис сцени також сприяє узгодженості міток серед сторінок.

Діаграми: Опишіть мету діаграми та потік інформації, не кожну мітку. Вкажіть мету, ключові кроки та як вони з’єднуються. Якщо з’являються осі чи категорії, згадайте їх коротко (наприклад, "x-вісь: час; y-вісь: дохід"). Уникайте дублювання довгого тексту з зображення. Приклад: "Потік процесу від входу до виходу з чотирма кроками: вхід, аналіз, рішення, дія." Для діаграми тримайте фокус на відносинах і результатах.

Логотипи: Ідентифікуйте бренд і, якщо значущо, символіку логотипу. Віддавайте перевагу "Логотип BrandName" чи "Wordmark BrandName." Якщо логотип декоративний, залиште атрибут alt порожнім і дозвольте панелі оголосити декорацію користувачам. Використовуйте узгоджений шаблон серед сторінок, щоб користувачі знали, чого очікувати, і могли покладатися на результати пошуку для поверхневого бренду.

Інфографіки: Надайте стислий підсумок основних знахідок, з ключовими числами, зазначеними простою мовою. Не дублюйте довгий текст з графіки; витягуйте потрібні цифри в alt-текст. Якщо цитата передає вплив, включіть її в лапках. Наприклад: "Зростання прийняття на 42%." У панелі UI чекбокс міг би перемикати короткий alt-текст проти довшої версії, щоб і розум, і користувачі з різними потребами отримували те, що потрібно. У різних ситуаціях цей підхід тримає інтерес читача високим і забезпечує доступність для всіх користувачів; швидкий alt-текст включав би суттєві числа та короткий takeaway.