Полное руководство по написанию эффективного атрибута alt для обеспечения доступности и SEO

Пишите alt текст в виде краткого, описательного предложения, которое объясняет, что изображено на картинке и почему это важно для людей. Для каждого изображения четкое описание помогает вспомогательным технологиям передавать контекст пользователям, которые полагаются на программы чтения с экрана.

Alt текст также поддерживает видимость при поиске. Он позволяет поисковым системам понимать содержимое на вашем сайте и индексировать изображения, связанные с окружающим описанием. Хорошо составленное описание может обеспечить тысячи поисков и связать пользователей с нужными продуктами или функцией. Хороший alt текст способствует доступности, улучшает пользовательский опыт и помогает поисковым сигналам соответствовать контексту страницы. Используйте простой язык, избегайте загромождения и позволяйте образам описывать себя в контексте страницы.

Руководство: Для каждого изображения напишите конкретное описание, в котором указаны субъект, действие и контекст. Для продуктов укажите название продукта, цвет и основную функцию. Используйте точные термины, а не общие ярлыки, и сверяйтесь с документацией для поддержания согласованности со стратегией контента сайта. Наиболее эффективный alt текст обогащает страницу, а не повторяет то, что уже сказано в окружающем тексте.

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

Наконец, проведите быструю проверку: после составления попросите коллегу утвердить alt текст, чтобы убедиться в точности и соответствии документации перед публикацией на сайте.

Подробное руководство по написанию Alt текста для обеспечения доступности и SEO; Когда использовать alt текст

Начните с краткого, информативного alt текста, который описывает то, что передает изображение, и его правильную роль на странице для программ чтения с экрана. Этот подход подходит для всего, от маленькой иконки до сложной диаграммы, и помогает пользователям понимать окружающий контент, когда изображения не могут быть просмотрены.

Описывая, сосредоточьтесь на содержании и функции. Если изображение декоративное и не добавляет смысла, опустите alt текст или установите пустой атрибут alt, чтобы он не прерывал поток на экране.

Используйте alt текст для изображений, которые передают информацию: графики, диаграммы, фотографии, логотипы или любой визуальный элемент, который вносит вклад в сообщение. Если диаграмма показывает тенденции в графиках Excel, опишите оси и линию тренда; если пустынный пейзаж или фотография птицы является центральной точкой, отметьте субъект и обстановку. Когда цвета имеют значение, упомяните их (например, белый фон с жирной линией). Если на изображении появляется дикая природа, например, синицы, опишите животное и его действия. Сохраняйте линии простыми и избегайте описания каждого пикселя. Для больших диаграмм предоставьте краткое описание и ссылку на более длинную заметку или руководство ниже.

Два практических примера помогают проиллюстрировать мастерство: "Птица сидит на панели с белой рамкой над пустынным пейзажем" и "График из Excel показывает рост продаж во 2 квартале на 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 текста: Что описывать и что исключать

Опишите изображение в одном кратком предложении, которое передает его цель, затем добавьте информативное описание, которое охватывает основные темы и контекст. Укажите, кто или что появляется, любые действия и обстановку, чтобы помочь пользователю понять все, что показано.

• Что описывать
• Темы и действия: идентифицируйте людей, животных (например, синиц, сидящих на ветке) или объекты, такие как бренды, продукты или инструменты.
• Текст внутри изображения: точно перепишите цитаты или короткие фразы в том виде, в каком они появляются, включая числа или даты.
• Контекст и цель: объясните, почему это изображение существует в этой записи и что оно передает об окружающем контенте.
• Бренд и стиль: укажите название бренда и отметьте визуальный стиль или иконографию, если это проясняет смысл.
• Графическое содержимое: для графиков или диаграмм обобщите тенденцию, метки, оси и ключевые точки данных.
• Продукты и предложения: опишите продукт, модель, цвет и любые видимые предложения или скидки.
• Цвета, макет и композиция: упомяните доминирующие цвета, если они влияют на понимание, а также любые видимые подсказки макета.
• Местоположение и время: укажите, где происходит сцена и когда это происходит, если это уместно.
• Длина и тон: сделайте его информативным и нейтральным, выбрав язык, который соответствует ожиданиям пользователей.
• Поток и удобочитаемость: структурируйте описание так, чтобы программа чтения с экрана могла следовать естественным образом, избегая бессвязных фраз.
• Что исключать
• Изображения только для декоративных целей: если изображение не предоставляет информативного контента, используйте пустой атрибут alt (пустой) или отметьте как декоративное.
• Несущественные детали: пропускайте цветистый или избыточный язык, который не способствует пониманию.
• Неинформативные визуальные элементы: избегайте описания фонового шума или несвязанной атмосферы, если это не меняет интерпретацию.
• Несоответствующий контекст: исключите тангенциальные темы, невидимые на изображении.
• Повторяющиеся описания: не повторяйте информацию, уже переданную окружающим текстом.
• Практические рекомендации
• Руководства: следуйте методам, дружественным к WCAG, и проверяйте их на соответствие целям доступности и SEO.
• Длина: стремитесь к 125–160 символам для стандартных изображений; для сложных диаграмм или насыщенных сценами могут потребоваться длинные описания.
• Выбор терминов: выбирайте язык, который соответствует голосу бренда и ожиданиям потребителей, включая названия продуктов и предложения, когда они видны.
• Согласованность: придерживайтесь постоянного стиля для всех записей, при необходимости добавляя релевантные детали, такие как бренд, продукт и цвет.
• Обзор: проведите быструю проверку alt текста, чтобы убедиться, что он объясняет все необходимое без лишней информации.
• Примеры и подход
• Пример записи: "Синицы сидят на сосновой ветке в сумерках; мягкое голубое небо и сосновые иголки вокруг; видна наклейка бренда на кормушке."
• Пример графика: "Линейный график, показывающий ежемесячные продажи до третьего квартала, с осями, обозначенными как Выручка (долл. США) и Месяц, с цветовой кодировкой по категориям продуктов."
• Пример цитаты: "Изображение показывает цитату "Ограниченное по времени предложение" с красной эмблемой; включите точную формулировку, если она направляет действия пользователя.
• Описательный подход: объясните все, что заметил бы зрячий пользователь, затем сверьтесь с окружающим руководством или заметьте в примечаниях.
• Сделайте его действенным
• Согласование записи и описания: каждая запись изображения должна иметь описательный alt текст, который соответствует видимому контенту и цели.
• Поток и краткость: составляйте предложения, которые читаются плавно, избегая беспорядка и сохраняя описание информативным.
• Случаи с длинной формой: для сложных визуальных элементов предоставьте более длинное описание, которое объясняет взаимосвязи и результаты, затем обобщите с помощью краткого предложения alt.
• Быстрый контрольный список
• Объясняет ли он цель изображения? Да/Нет
• Описаны ли все существенные элементы (включая цитаты или предложения)? Да/Нет
• Отмечен ли декоративный контент как пустой? Да/Нет
• Является ли тон нейтральным и информативным? Да/Нет

Опишите визуальный контент для программ чтения с экрана: конкретные шаблоны фраз

Начните с объекта и его действия, затем добавьте контекст в краткой строке. Это помогает читателю понять сцену с первого взгляда и поддерживает устойчивый темп чтения, даже когда контент сложный, например, график или диаграмма.

Выбирайте шаблоны по типу контента: графики и диаграммы, изображения, элементы управления, таблицы данных и декоративные элементы. Для графиков укажите метрику, временной период и тенденцию; для изображений определите субъект и его фон или детали; а для элементов управления пользовательского интерфейса укажите метку и действие. Используйте фразы, которые читатель может сканировать, а не длинные абзацы, которые затуманивают смысл.

В SharePoint и ресурсах бренда поддерживайте согласованность, повторно используя небольшой набор конкретных шаблонов. Андре, известный сторонник доступного контента, демонстрирует, как эти фразы сочетаются с короткими, точными подписями для поддержки быстрого чтения и легкого поиска. Сохраняйте подписи удобными для чтения, а не многословными, и редактируйте их на предмет ясности по мере того, как вы уточняете свой alt текст в процессе проверки.

Рекомендации по SEO: балансировка ключевых слов без перебора

Рекомендация: Сосредоточьтесь в первую очередь на ясности; включите одно основное ключевое слово, которое точно отражает изображение, и добавляйте вспомогательные термины только тогда, когда они улучшают смысл для пользователей. Это руководство содержит практические рекомендации для авторов по балансировке SEO и доступности в alt тексте.

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

Alt текст может быть длиннее для сложных диаграмм, но сохраните основной смысл и избегайте заполнителя.

• Руководство по основному ключевому слову: Определите одно релевантное ключевое слово и поместите его в начало alt текста, когда это позволяет содержание изображения.
• Естественный язык: Пишите alt текст в виде предложения или краткой фразы, которую может произнести пользователь; такой стиль написания улучшает читаемость для пользователей с ограниченными возможностями и помогает поисковым системам интерпретировать контекст.
• Ограничение по количеству слов: Стремитесь к 125 символам или меньше; это предотвращает перенасыщение ключевыми словами и сохраняет читаемость текста, поддерживая при этом поисковые намерения.
• Выбор с учетом контекста: Учитывайте раздел и ситуацию; для диаграмм опишите данные или поток; для фотографий определите предмет и действие; для значков объясните действие или значение.
• Последствия для ссылок и кликов: Если изображение является ссылкой, опишите место назначения и то, что произойдет при нажатии, чтобы помочь пользователям принять решение о продолжении.
• Декоративные изображения: Используйте пустой атрибут alt (alt="") для визуальных элементов, которые не вносят никакой информации; это сводит к минимуму бессмысленный шум для программ чтения с экрана.
• Подход с использованием контрольного списка: Рассматривайте каждый alt текст как часть процесса на основе контрольного списка в вашем рабочем процессе; это помогает командам утверждать и отслеживать изменения.
• Тестирование и отзывы: Протестируйте с помощью программ чтения с экрана, соберите отзывы от разработчиков и пользователей и утверждайте изменения, которые улучшают понимание.
• Какова цель: Всегда спрашивайте, какова цель изображения в окружающем контенте, и убедитесь, что alt текст отражает эту цель без избыточности.
• Выбор слов и пробелы: Отдавайте предпочтение точным терминам, а не заполнителям; сохраняйте спокойный ритм и используйте достаточное количество пробелов вокруг текста, чтобы облегчить сканирование.

Вот вам в помощь, краткий справочник для авторов: приведите alt текст в соответствие с контекстом контента и используйте это руководство для улучшения доступности и SEO баланса статьи.

Щелкните здесь, чтобы увидеть контрольный список.

Итог: Этот подход улучшает читаемость статьи, поддерживает пользователей с ограниченными возможностями и сохраняет связь между alt текстом и релевантностью страницы, не жертвуя при этом производительностью.

Alt текст для разных типов изображений: фотографии, диаграммы, логотипы, инфографика

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

Фотографии: Начните с основного объекта, затем добавьте контекст, например, обстановку и действие. Сохраняйте небольшую длину, стремитесь к 90–120 символам. Если появляется шумовой эффект или другая аудио-подсказка, укажите ее в скобках. Если изображение содержит речь, включите короткий отрывок из цитаты и заключите его в кавычки. Пример: "Учитель пишет на доске, пока ученики слушают". Этот подход помогает пользователям узнать все подробности момента и поддерживает поиск и навигацию. Четкое описание сцены также способствует единообразию названий на разных страницах.

Диаграммы: Опишите цель диаграммы и поток информации, а не каждую метку. Укажите цель, основные шаги и то, как они связаны. Если появляются оси или категории, упомяните их кратко (например, "ось x: время; ось y: выручка"). Избегайте дублирования длинного текста с изображения. Пример: "Технологический процесс от ввода до вывода с четырьмя шагами: ввод, анализ, решение, действие." Для диаграммы сосредоточьтесь на взаимосвязях и результатах.

Логотипы: Определите бренд и, если это имеет значение, символику логотипа. Предпочтительно "Логотип BrandName" или "Словесный товарный знак BrandName". Если логотип является декоративным, оставьте атрибут alt пустым и позвольте панели объявить о декоративном оформлении пользователям. Используйте согласованный шаблон на разных страницах, чтобы пользователи знали, чего ожидать, и могли полагаться на результаты поиска, чтобы найти бренд.

Инфографика: Предложите краткое изложение основных результатов с основными цифрами, указанными простым языком. Не дублируйте длинный текст из графика; перенесите нужные цифры в alt текст. Если цитата передает влияние, включите ее в кавычки. Например: "Увеличение внедрения на 42%". В панели пользовательского интерфейса флажок может переключать короткий alt текст и более длинную версию, чтобы и ум, и пользователи с разными потребностями получали то, что им нужно. В различных ситуациях этот подход поддерживает высокий интерес читателей и обеспечивает доступность для всех пользователей; быстрый alt текст будет включать в себя важные цифры и краткий вывод.