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

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

Что такое альтернативный текст?

Альтернативный текст — это именно то, на что он похож, – описание изображения, которое появляется на странице. Просто, не так ли? Но это еще не все. Чтобы написать по-настоящему эффективный текст с измененным шрифтом, важно понимать, почему это важно, когда изображению нужен атрибут alt (предупреждение о спойлере: не каждое изображение подходит!), а также лучшие инструменты, которые помогут вам убедиться, что ваши изображения будут скрыты. Давайте сделаем так, чтобы ваш альтернативный текст работал умнее, а не сложнее!

Почему важен альтернативный текст

Альтернативный текст — это не просто флажок, который нужно установить, это мощный атрибут, который служит двум важным целям: делает ваш контент более понятным и помогает поисковым системам понять ваши изображения.

Доступность

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

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

Хотите узнать больше о создании инклюзивного онлайн-сообщества? Вот несколько ресурсов, которые помогут вам начать работу: 

Поисковая оптимизация (SEO)

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

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

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

Альтернативный текст, заполненный ключевыми словами: 

alt=”Милый котенок, играющий с клубком пряжи”, "очаровательный котенок", "пушистый котенок", "игривый котенок", "изображение милого котенка", "котенок на продажу", "фотографии котенка".

Хорошо написанный альтернативный текст может повысить доступность и поддержать вашу SEO-стратегию. Руководствуйтесь здравым смыслом и следите за тем, чтобы посетители вашего сайта (люди) не забывали об этом. 

Как узнать, какие изображения нуждаются в дополнительном тексте и как его написать?

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

Вот как правильно написать альтернативный текст в зависимости от того, для чего предназначено ваше изображение:  

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

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

alt="Логотипы для доступных интеграций P2: Crowdsignal, Figma, Twitter, GitHub, YouTube, Vimeo, Google Calendar и Loom".

Декоративные изображения: Если изображение предназначено только для того, чтобы оно выглядело красиво и не добавляло никакой важной информации, используйте пустой атрибут alt (alt=””). Это означает, что assistive technologies следует его пропустить.  

Функциональные изображения: Если изображение работает как кнопка или ссылка, дополнительный текст должен объяснять, для чего оно предназначено, а не как выглядит. 

Например, дополнительный текст для значка видео может гласить: “Посмотрите это видео о зимующих пчелах на Vimeo”.  

Изображения текста: Если изображение содержит читаемый текст (например, графическое изображение с цитатой или логотипом), альтернативный текст должен содержать те же слова.

Сложные изображения: для диаграмм, графиков или наглядных пособий требуется более подробный дополнительный текст для описания данных или информации, которые они содержат. Вы можете даже перейти по ссылке на более длинное описание.  

Группы изображений: Если несколько изображений объединяются для передачи одной идеи, альтернативный текст для одного из изображений должен охватывать все сообщение целиком. Хорошим примером этого могут служить снимки процесса приготовления для рецепта или другого пошагового руководства. 

Карты изображений: Для изображений с интерактивными областями укажите альтернативный текст, объясняющий общее назначение изображения, и включите альтернативный текст для каждого интерактивного раздела, описывающий, куда он ведет. 

Не уверены, как классифицировать изображение? Обратитесь за помощью к разделу. 

Официальных правил по длине не существует, но, как правило, рекомендуется, чтобы объем текста не превышал 140 символов. Более длинные описания могут стать утомительными при чтении с экрана. Будьте описательны, но оставайтесь краткими — это не место для творческих изысков.

Инструменты, позволяющие обеспечить наличие на изображениях текста с использованием alt.

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

Инструменты Alt Text от команды NerdPress – это бесплатный, легкий плагин, который генерирует CSV-файл изображений, используемых в вашем контенте, вместе с их атрибутами alt.

После завершения сканирования (это очень быстро!) вы можете открыть CSV-файл в выбранном вами приложении для работы с электронными таблицами. Там вы сможете быстро определить изображения, у которых отсутствуют атрибуты alt, и отсканировать те, которые, возможно, нуждаются в доработке. Файл также содержит ссылки для редактирования записей, в которых отображаются изображения, что позволяет быстро и просто обновлять их атрибуты alt.

Этот бесплатный плагин для WordPress от Equalize Digital выходит за рамки alt text, чтобы сделать ваш сайт доступным для широкого круга посетителей. Если вы и ваша команда стремитесь сделать свой контент доступным, это отличный ресурс. 

Equalize Digital также ведет группу в Facebook и проводит ежемесячные виртуальные встречи для разработчиков WordPress, дизайнеров и пользователей, заинтересованных в получении дополнительной информации о создании доступных веб-сайтов, которыми могут пользоваться люди с любыми способностями.

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

Заведите блог на <url> WordPress.com

Начните оптимизировать свой контент с помощью блога.

Выберите план, который лучше всего подходит для вашего бизнеса, и позвольте нам позаботиться об остальном. С любым тарифным планом WordPress.com вы получаете все преимущества быстрого и безопасного управляемого хостинга WordPress.