Содержание
Как правильно написать alt-текст — Блог HTML Academy
Alt — обязательный атрибут тега <img>.
Это альтернативное описание для изображений, которые не видят пользователи:
- из-за медленного соединения;
- из-за неправильного пути или имени файла в атрибуте
src; - так как пользуются скринридерами.
Перед тем, как перейти к примерам, разберёмся с необходимостью альтернативного текста в разных ситуациях.
Когда alt-текст нужен
У любого изображения, которое иллюстрирует или дополняет текст. Например, для изображений в теге <a>, если у ссылки нет текстового содержимого.
<a href="/courses"> <img src="keks.jpg" alt="Кекс приглашает на курсы"> </a>
Как правильно писать
- Кратко. Максимальная рекомендуемая длина — 125 символов. Один из самых популярных скринридеров JAWS не любит длинные строки. Очень длинные строки он может зачитать как три картинки, хотя это было всего лишь одна длинная строка.
- Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
- Уникально. Не повторяйте текст, который уже есть на странице.
- Не начинайте со слов «картинка» или «изображение».
- Отталкивайтесь от окружающего контента.
- Следуйте правилам языка, на котором составляется описание: пунктуация, орфография.
Примеры использования
Картинка
<img src="ml.jpg" alt="Динозавры">
Так можно описать, если в статье есть текст, который рассказывает о фотографии.
Если текста нет, например, у нас галерея изображений, тогда нужно описать картинку более детально:
<img src="ml.jpg" alt="Два динозавра в национальном парке Анза-Боррего на фоне звёздного неба. Один большой, другой маленький">
Ссылка
<a href="/blog"> <img src="blog.jpg" alt="Перейти на главную страницу блога"> </a>
Начинать текст с «ссылка» не нужно, роль уточнения играет сам тег <a>.
Диаграмма
<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">
Если текста со статистикой нет, то придётся всю статистику вынести в alt:
<img src="chart.png" alt="Еда — 10%, соседи — 15% ...">
Картинка с текстом
Просто переносим текст в alt:
<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">
Figure и figcaption
Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:
<figure> <img src="image.jpg" alt="Рабочее место Тани"> <figcaption>Таня ушла на разминку</figcaption> <figure>
Когда alt-текст не нужен
Когда картинка декоративная и не имеет смысла.
- Аватарка: имя пользователя и так у нас уже есть.
- Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
- Иконки в кнопке.
Как не стоит писать
Если картинка оформительская и не требует alt, то не нужно писать туда пробел или его аналоги.
Плохие примеры:
<img src="image.png" alt=" "> <img src="image.png" alt=" ">
Если так делать, то скринридеры, либо начнут говорить, что это «картинка» (бессмыслица), либо прочитают «пробел» (ещё более бессмысленно).
Что будет, если забыть про alt-текст
Основных проблем две: пользователи ничего не увидят, а скринридеры могут прочитать неправильно или не то. Например, NVDA ничего не скажет, JAWS скажет «Графическое изображение без описания», а VoiceOver скажет название файла.
Но иногда бывают картинки, которым не добавляют alt. Например, это поиск «рыжий кот», и в поисковой выдаче показываются тысячи рыжих котов. Смысла указывать alt нет.
Чаще всего в такой ситуации вообще удаляют alt:
<img src="orange-cat-1.jpg">
Но в этом случае некоторые скринридеры начнут читать src, что ещё хуже.
Поэтому лучше оставлять пустой alt. Из двух зол выбирают наименьшее.
<img src="orange-cat-2.jpg" alt="">
Искусственный интеллект и alt
ИИ в социальных сетях неплохо справляется с генерацией текстов для изображений. Можно ознакомиться в Фейсбуке, Инстаграме или Гугл-картинках.
Если посмотреть сейчас на автоматическую генерацию текстов, то там всегда присутствует доля предположения — «на изображении может находиться 1 человек».
С абстрактными картинками всё ещё хуже, так как ИИ вообще не понимает, что происходит.
Alt-текст — капля в море фронтенда
Всё остальное — в тренажёрах по вёрстке. 11 вводных глав бесплатно, и −40% на подписку в первую неделю.
Регистрация
Литература
- Рекомендации W3C по alt-текстам (англ.)
- Альтернативный текст в доступности (англ.)
- Использование ИИ для генерации alt-текста на изображениях (англ.)
- Accessibility: Images, «Alt» tags, and the «Out Loud» Experience (англ. )
)Alt-текст для SEO: как оптимизировать изображения
Joshua Hardwick
Глава отдела контента в Ahrefs (проще говоря, я отвечаю за то, чтобы каждый пост в блоге был КРУТЫМ).
Показывает, сколько различных веб-сайтов ссылаются на этот контент. Как правило, чем больше сайтов ссылаются на вас, тем выше вы ранжируетесь в Google.
Показывает ежемесячный рассчетный поисковый трафик на эту статью по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3–5 раз больше.
Количество ретвитов этой статьи в Twitter.
Поделиться этой статьей
Содержание
Alt-текст (замещающий текст) описывает изображение на веб-странице. Он находится в коде HTML и, как правило, не отображается на самой странице.
Но чем он тогда важен? И как его можно использовать, чтобы улучшить поисковую оптимизацию и повысить уровень удобства пользователей?
Из этого руководства вы узнаете:
- Чем важен alt-текст
- Как добавить alt-текст к изображениям
- Почему не стоит добавлять alt-текст ко всем изображениям подряд
- Как составить хороший alt-текст
- Примеры хорошего и плохого alt-текста
- Как найти и исправить проблемы с атрибутами alt
Чем важен alt-текст?
Alt-текст является важным фактором по четырем основным причинам.
1. Alt-текст повышает уровень доступности
Миллионы людей страдают от нарушений работы органов зрения и могут пользоваться программами для чтения информации с экрана, чтобы потреблять онлайн-контент. Такие программы преобразуют контент на экране, в том числе изображения, в звук.
Изображения без замещающего текста создают определенные проблемы для этих программ, поскольку они не позволяют полноценно передать пользователю содержимое страницы. Обычно программы пропускают такие изображения или, хуже того, зачитывают длинные и бесполезные названия файлов.
Google рассказывает о важности alt-текста для тех, кто пользуется программами для чтения информации с экрана, в своем Руководстве по поисковой оптимизации для начинающих.
2. Alt-текст может улучшить «тематическую релевантность»
Google изучает слова на странице, чтобы определить ее тематику.
К примеру, если на странице упоминаются пудели, лабрадоры и ретриверы, Google поймет, что на ней представлена информация о породах собак.
Как это связано с изображениями?
Дело в том, что иногда контекст «спрятан» в изображениях, которые Google не может распознать.
Использование alt-текста помогает поисковику «увидеть» эти изображения, а значит, лучше понять вашу страницу и ее содержимое.
3. Alt-текст может повысить рейтинг страницы в Google Images
Google Images — вторая по величине поисковая система в мире. Она выполняет обработку 20,45 % всех поисковых запросов в сети Интернет, что больше доли YouTube, Bing и прочих поисковых систем вместе взятых.
Это значит, что у вас есть возможность привлечь трафик с Google Images.
Просто взгляните на количество переходов на блог Ahrefs из Google Images за последние три месяца:
Джон Мюллер из Google говорит, что alt-текст — это важная часть оптимизации для Google Images:
Alt-текст чрезвычайно полезен для Google Images — если вы хотите, чтобы ваши изображения попали в их выдачу.
— John (@JohnMu) September 4, 2018
Даже при использовании «ленивой загрузки» вы знаете, какое изображение будет загружено, поэтому как можно раньше добавьте к нему эту информацию и проверьте, как она отрисовывается.4. Alt-текст служит якорным текстом для ссылок-изображений
Якорный текст — это кликабельный текст ссылки, позволяющей перейти с одной страницы на другую. Google использует его, чтобы лучше понять тематику той страницы, на которую ведет ссылка.
Но не все ссылки являются текстовыми — некоторые закреплены за изображениями.
Google заявляет:
Если вы все-таки решите использовать изображение в качестве ссылки, приведение для него alt-текста поможет Google больше узнать о странице, на которую вы ссылаетесь. Представьте, что вы пишите якорный текст для текстовой ссылки.
Как добавить alt-текст к изображениям
Просто добавьте атрибут alt в тег <img> в коде HTML.
Изображение с атрибутом alt:
<img src=“пирог.jpg” alt=“пирог с мясом и пивом”>
Если вы пользуетесь современной системой управления контентом (CMS), то в ней наверняка можно добавить alt-текст, не забираясь в сам код HTML.
Например, в WordPress, когда вы добавляете изображение к странице или определенной записи, на экране появляется поле для alt-текста:
В других CMS это делается схожим образом.
Вот инструкции для некоторых из наиболее популярных CMS:
- Добавление alt-текста к изображениям в Squarespace
- Добавление alt-текста к изображениям в Wix
- Добавление alt-текста к изображениям в Shopify
Нужно ли добавлять alt-текст ко всем изображениям?
Нет, это распространенное заблуждение.
Если изображение предназначено для декоративных целей и не несет важной информации, добавлять к нему alt-текст не следует.
Например, на некоторых сайтах для разделения контента используются пиктограммы:
Они нужны только лишь для красоты, поэтому добавлять к ним alt-текст не нужно.
Такой текст будет только раздражать посетителей с программами для чтения информации с экрана, не добавляя при этом никакой «ценности для SEO».
То же самое относится к фоновым или стоковым изображениям наподобие этого:
Наличие alt-текста «ванна и свеча» не принесет пользы читателям с нарушениями зрения, поскольку эта информация им ни к чему. Лучше будет, если программа для чтения полностью проигнорирует это изображение.
Но есть один важный момент…
Если изображение не требует наличия alt-текста, тогда лучше всего добавить пустой атрибут alt. Это нужно сделать, поскольку некоторые программы для чтения информации с экрана при отсутствии alt-текста читают названия файлов, в то время как большинство из них пропускает пустой alt-текст.
Вот как это должно выглядеть:
<img src="разделитель.gif" alt="">
Узнайте больше из этого руководства от WebAIM.
Как составить хороший alt-текст
Alt-текст — это не квантовая физика.
Четко выполняйте приведенные ниже пять рекомендаций, и все будет хорошо.
- Будьте немногословны. Пространный alt-текст будет действовать на нервы тем, кто пользуется программами для чтения. Используйте минимум слов (если без длинного описания все-таки не обойтись, используйте атрибут longdesc).
- Будьте точны. Главная задача — описать изображение словами.
- Не забивайте alt-текст ключевыми фразами. Это не место для размещения ключевых фраз.
- Не объявляйте, что это изображение. Не нужно начинать описания со слов «Изображение…» или «Фотография…». И Google, и программы для чтения информации с экрана способны сделать это сами.
- Избегайте избыточности. Не повторяйте информацию, которая уже имеется в контексте изображения. Например, если у вас на странице есть фотография Стива Джобса, а прямо под ней написано «Стив Джобс», то добавлять это описание в alt-текст не нужно. Google должен и так понять, что это подпись к фотографии.
Кроме того, не забывайте добавлять alt-текст к кнопкам на используемых формах. Иначе программы для чтения могут пропустить их, и часть пользователей не сможет должным образом взаимодействовать с вашим сайтом.
Примеры хорошего и плохого alt-текста
Давайте проверим, насколько хорошо мы поняли приведенные выше правила, рассмотрев несколько примеров.
Плохо: <img src=“cheesecake.png” alt=“фотография чизкейка”>
Нормально: <img src=“cheesecake.png” alt=“чизкейк”>
Хорошо: <img src=“cheesecake.png” alt=“чизкейк с клубникой”>
Идеально: <img src=“cheesecake.png” alt=“чизкейк с клубникой и кремом”>
Плохо: <img src=“steve-jobs.png” alt=“стив джобс apple iphone ipad mac”>
Нормально: <img src=“steve-jobs.png” alt=“стив джобс”>
Хорошо: <img src=“steve-jobs.png” alt=“основатель apple, стив джобс”>
Идеально: <img src=“steve-jobs.
png” alt=“основатель apple, стив джобс, демонстрирует iphone 4”>
Плохо: <img src=“amp.png” alt=“изображение4”>
Нормально: <img src=“amp.png” alt=“усилитель orange”>
Хорошо: <img src=“amp.png” alt=“усилитель orange — 30 ватт”>
Идеально: <img src=“amp.png” alt=“orange AD30HTC — усилитель 30 ватт”>
Обратите внимание на то, что в последнем примере в текст включен номер модели. Это хорошее решение, особенно для изображений на страницах товаров в интернет-магазинах.
Как найти и исправить проблемы с атрибутами alt
Существует множество служб, которые могут просканировать ваш сайт и найти недостающие атрибуты alt; один из них — Site Audit от Ahrefs.
Но отсутствие alt-текста — это не обязательно проблема, ведь он требуется не для всех изображений.
К примеру, взгляните на эти ссылки с отсутствующими атрибутами alt:
Даже по названиям ясно, что для них alt-текст не нужен.
Это декоративные изображения, а значит, нам хотелось бы, чтобы программы для чтения их пропускали.
Поэтому вместо того, чтобы прочесывать свой сайт и корпеть над каждым недостающим атрибутом alt (а их обычно довольно много), полезнее проверить и улучшить alt-текст на тех страницах, у которых уже есть трафик.
На это есть две веские причины:
- Их уже читают люди с нарушениями работы органов зрения. У 2,4 % граждан США нарушено зрение. Это приблизительно каждый 42‑й человек; из чего следует, что если вашу страницу посещают 10 000 человек в месяц, то 240 из них не могут полноценно потребить ваш контент.
- Они потенциально могут получать больше трафика. Alt-текст может помочь изображениям подняться выше в выдаче Google Images, а это приведет к повышению трафика. Даже прирост на 1 % для страницы с 10 000 посещений в месяц означает 100 дополнительных посетителей.
Итак, какова же последовательность действий:
Шаг 1.
Определите страницы с наибольшим естественным трафиком
Воспользуйтесь сервисами Google Analytics, Google Search Console или отчетом «Top pages» («Самые популярные страницы») в Site Explorer от Ahrefs.
Шаг 2. Проверьте свои атрибуты alt
Установите бесплатное расширение для Chrome Alt Text Tester, откройте свою наиболее посещаемую страницу и активируйте данное расширение.
Расширение будет отображать alt-текст при наведении курсора на изображение.
Если атрибут alt отсутствует, расширение сообщит об этом.
Проверьте alt-текст для нескольких изображений на странице. Вскоре у вас появится представление о том, где они оптимизированы хорошо, где — плохо, а где вообще не оптимизированы.
Например, понадобится всего несколько секунд, чтобы пролистать эту статью и убедиться в том, что все изображения в ней хорошо оптимизированы…
…или сделать обратный вывод для этой страницы на сайте The Mirror:
Шаг 3. Сделайте то же самое с другими страницами
Выполните ту же процедуру для самых посещаемых страниц вашего сайта.
В ходе работы вы поймете, хорошо ли оптимизирован alt-текст на вашем сайте, или над ним еще нужно поработать.
Это не должно занять много времени, поскольку большинство сайтов получают основную долю трафика всего от нескольких страниц.
Например, 51 % месячного естественного трафика блогу Ahrefs приносят всего десять записей…
…что позволяет нам легко и быстро проверить и оптимизировать alt-текст для наиболее часто посещаемых страниц.
Напоследок
Улучшение alt-текста является крайне важным аспектом, однако это не единственный пункт в программе поисковой оптимизации изображений. Также нужно оптимизировать названия файлов, использовать адаптивные изображения, предусмотреть «ленивую загрузку» и сделать многое другое.
Узнайте об этом больше из нашего списка 12 практических рекомендаций по поисковой оптимизации изображений.
Перевела Кирик Наталья, владелец контент агентства WordFactory.ua
Что это такое, как это написать и почему это важно для SEO
Если вы тратите время на оптимизацию содержимого своего блога или веб-сайта, заголовков, подзаголовков и метаописаний для поисковых систем, следующее изображение должно вас насторожить:
Снимок экрана выше — это первая страница результатов поисковой системы (SERP), которую Google создает для поискового запроса «примеры таблиц Excel».
Обратите внимание, что в дополнение к вкладке «Изображения» вверху Google загружает значительный пакет кликабельных изображений в начало главной страницы результатов — еще до того, как результаты с органическим текстом станут видимыми.
Сегодня почти 38% поисковой выдачи Google содержат изображения, и это число, вероятно, будет увеличиваться. Это означает, что, несмотря на все ваши усилия по SEO, вы все равно можете упустить еще один источник органического трафика: изображения вашего сайта. Как получить доступ к этому источнику трафика? Альтернативный текст изображения.
Что такое альтернативный текст?
Альтернативный текст, также называемый альтернативными тегами и альтернативными описаниями, представляет собой письменную копию, которая появляется вместо изображения на веб-странице, если изображение не загружается на экране пользователя. Этот текст помогает инструментам чтения с экрана описывать изображения для слабовидящих читателей и позволяет поисковым системам лучше сканировать и ранжировать ваш веб-сайт.
Независимо от того, выполняете ли вы SEO для своего бизнеса или нет, оптимизация замещающего текста изображения вашего веб-сайта — это ваш путь к улучшению пользовательского опыта для ваших посетителей, независимо от того, как они впервые нашли вас.
Как добавить замещающий текст к вашим изображениям
В большинстве систем управления контентом (CMS) нажатие на изображение в теле сообщения блога вызывает оптимизацию изображения или модуль форматированного текста, где вы можете создавать и изменять альтернативный текст изображения.
Давайте рассмотрим следующие шаги для CMS Hub и WordPress ниже.
Как добавить замещающий текст в HubSpot CMS
В HubSpot после нажатия на изображение и значка редактирования (в виде карандаша) появится всплывающее окно оптимизации изображения.
Вот как это окно оптимизации изображения выглядит в CMS внутри вашего портала HubSpot:
Затем ваш замещающий текст автоматически записывается в исходный HTML-код веб-страницы, где вы можете дополнительно редактировать замещающий текст изображения, если ваша CMS этого не делает. У вас есть легко редактируемое окно альтернативного текста. Вот как может выглядеть этот тег alt в исходном коде статьи:
Как добавить замещающий текст в CMS WordPress
В WordPress при нажатии на изображение автоматически открывается вкладка Block на боковой панели. В разделе «Настройки изображения» добавьте замещающий текст в пустое поле.
Когда будете готовы, нажмите Обновить на панели инструментов в верхней части экрана.
Самое важное правило альтернативного текста? Будьте описательными и конкретными. Однако имейте в виду, что это правило замещающего текста может потерять свое значение, если замещающий текст не учитывает контекст изображения.
Альтернативный текст может не попасть в цель тремя разными способами. Рассмотрим примеры ниже.
3 Примеры альтернативного текста изображения (хороший и плохой)
1. Ключевое слово и детали
Неверный альтернативный текст
alt="Стена офиса HubSpot Фрески на рабочем месте в сфере входящего маркетинга в Сингапуре оранжевые стены отправляют"
Что не так со строкой альтернативного текста выше? Слишком много ссылок на HubSpot. Использование альтернативного текста для вставки ключевых слов в фрагментированные предложения добавляет слишком много лишнего к изображению и недостаточно контекста. Эти ключевые слова могут быть важны для издателя, но не для поисковых роботов.
На самом деле, приведенный выше замещающий текст затрудняет для Google понимание того, как изображение связано с остальной частью веб-страницы или статьи, на которой оно опубликовано, что препятствует ранжированию изображения по связанным длинным хвостом ключевым словам, которые имеют более высокий уровень интереса.
позади них.
Хуже всего то, что если вы наберете слишком много ключевых слов, Google может оштрафовать вас.
Хороший альтернативный текст
Принимая во внимание плохой альтернативный текст (см. выше), лучшим альтернативным текстом для этого изображения может быть:
alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"
2. Detail vs. Specificity
Image via Winslow Townson
Bad Alt Text
alt="Бейсболист бьет по мячу на бейсбольном поле"
Строка замещающего текста выше технически следует первому правилу замещающего текста — быть описательным — но она не является описательной в правильном смысле. Да, на изображении выше показано бейсбольное поле и игрок, бьющий по бейсбольному мячу. Но это также фотография Фенуэй Парка и 34-го номера Дэвида Ортиса из «Ред Сокс», забивающего мяч над правым полем.
Это важные особенности, которые Google должен будет правильно проиндексировать, если это изображение, скажем, в блоге о спорте в Бостоне.
Good Alt Text
Принимая во внимание плохой альтернативный текст (выше), лучшим альтернативным текстом для этого изображения может быть:
alt="Дэвид Ортис из Boston Red Sox, отбивающий мяч с домашней площадки в Fenway Park"
3. Специфика против контекста
Изображение через UCLA
Оба изображения выше имеют четкий контекст, который может помочь нам написать хороший альтернативный текст — одно из офиса HubSpot, а другое из Fenway Park. Но что, если ваше изображение не имеет официального контекста (например, географического названия), с помощью которого можно было бы его описать?
Здесь вам нужно будет использовать тему статьи или веб-страницы, на которой вы публикуете изображение. Вот несколько плохих и хороших примеров замещающего текста в зависимости от причины, по которой вы его публикуете:
Для статьи о посещении бизнес-школы
Плохой замещающий текст
alt="Женщина, указывающая на экран компьютера"
Строка замещающего текста выше обычно воспринимается как приличный замещающий текст, но, учитывая, что наша цель — опубликовать это изображение со статьей о поступлении в бизнес-школу, мы упускаем некоторые варианты ключевых слов, которые могли бы помочь Google связать изображение с определенными разделами статьи.
Хороший альтернативный текст
Принимая во внимание плохой альтернативный текст (см. выше), лучшим альтернативным текстом для этого изображения может быть:
Строка альтернативного текста выше почти так же описательна и конкретна, как и хороший альтернативный текст из предыдущего примера. так почему же этого недостаточно для веб-страницы об образовательном программном обеспечении? Этот пример еще глубже раскрывает тему бизнес-школы и указывает, что идеальной аудиторией для этой веб-страницы являются учителя. Следовательно, альтернативный текст изображения должен отражать это. Принимая во внимание плохой альтернативный текст (см. В конечном счете, замещающий текст изображения должен быть конкретным, но при этом отражать тему веб-страницы, которую оно поддерживает. Получили идею до сих пор? Вот несколько важных ключей для написания эффективного замещающего текста изображения: Согласно Google, замещающий текст используется — в сочетании с алгоритмами компьютерного зрения и содержимым страницы — для понимания содержания изображений. Альтернативный текст, таким образом, помогает Google лучше понять не только то, о чем изображения, но и то, о чем веб-страница в целом. Это может увеличить шансы появления ваших изображений в результатах поиска изображений. При создании контента по теме подумайте, как ваша аудитория может предпочесть находить ответы на свои вопросы по этой теме. Во многих случаях поисковикам Google не нужны классические синие результаты поиска с гиперссылками — им нужно само изображение, встроенное в вашу веб-страницу. Например, посетитель, который ищет, как удалить дубликаты в Excel, может предпочесть снимок экрана, чтобы с первого взгляда понять, как выполнить задачу. alt="Профессор бизнес-школы указывает на экран компьютера студента" Образовательное программное обеспечение для учителей бизнес-школ Плохой альтернативный текст
alt="Учитель указывает на экран компьютера ученика" Good Alt Text
выше), лучшим альтернативным текстом для этого изображения может быть: alt="Профессор использует образовательное программное обеспечение для обучения студента бизнес-школы" Альтернативный текст изображения Передовой опыт
Для получения более подробной информации о том, когда добавлять замещающий текст, а когда нет, ознакомьтесь с этим деревом решений. Как замещающий текст влияет на SEO
Источник изображения
Поскольку это изображение имеет оптимизированный замещающий текст, оно отображается в результатах поиска изображений по ключевому слову «как удалить дубликаты в Excel». Поскольку сообщение также появляется в результатах веб-поиска по тому же ключевому слову, посетители могут перейти к сообщению в блоге через эти два разных канала.
Почему важен замещающий текст изображения?
Мы уже указывали на несколько причин, по которым важен замещающий текст изображения: а именно: доступность, взаимодействие с пользователем и трафик изображений. Понимание этих причин поможет вам написать лучший замещающий текст для ваших изображений. Ниже мы более подробно рассмотрим основные причины, по которым альтернативный текст изображения важен.
Доступность
Еще в 1999 году W3C опубликовал свои Рекомендации по доступности веб-контента 1.0, чтобы объяснить, как сделать контент более доступным для пользователей с ограниченными возможностями.
Одно из этих правил заключалось в том, чтобы «предоставить эквивалентные альтернативы слуховому и визуальному контенту». Это означало, что любые веб-страницы, включая изображения (или фильмы, звуки, апплеты и т. д.), должны содержать информацию, эквивалентную визуальному или слуховому содержанию.
Например, скажем, веб-страница содержит изображение стрелки вверх, которая ведет к оглавлению. Текстовым эквивалентом может быть «Перейти к оглавлению». Это позволит пользователю, использующему программу чтения с экрана или другую вспомогательную технологию, понять назначение изображения, не видя его.
User Experience
Альтернативный текст не только обеспечивает лучший пользовательский интерфейс для пользователей с ограниченными возможностями, но и обеспечивает лучший UX для всех пользователей.Скажем, у посетителя подключение с низкой пропускной способностью, поэтому изображения на вашей веб-странице не загружаются. Вместо этого вместо значка неработающей ссылки они также увидят замещающий текст.
Это позволит им понять, что изображение должно было передать.
Например, пользователь может видеть изображение слева. Если они не могут — из-за инвалидности, проблем с пропускной способностью или по другой причине — они услышат или увидят альтернативный текст справа. Это поможет обеспечить лучший пользовательский интерфейс, чем если бы не было альтернативного текста.
Источник изображения
Трафик изображения
Одной из самых важных вещей, которую может сделать для вас альтернативный текст изображения, является преобразование ваших изображений в результаты поиска с гиперссылками, которые появляются либо в Google Images, либо в виде пакетов изображений. Пакеты изображений — это специальные результаты, отображаемые в виде горизонтального ряда ссылок на изображения, которые могут появляться в любой органической позиции (включая место № 1 в поисковой выдаче, как показано в примере во вступлении).
Изображения, которые появляются либо в Google Images, либо в пакетах изображений, предоставляют еще один способ получить обычных посетителей.
Это может привести к увеличению числа посетителей на тысячи — по крайней мере, так было в случае с HubSpot.
Начиная с 2018 года команда блога HubSpot внедрила новую SEO-стратегию, которая частично была сосредоточена на оптимизации замещающего текста изображения. Это помогло увеличить трафик изображений блога на 779% менее чем за год, что привело к увеличению числа органических просмотров на 160 000. Подробнее об успехах команды можно прочитать в этом блоге.
Добавление замещающего текста изображения на ваш веб-сайт
Итак, с чего начать разработку замещающего текста для сообщений в блогах и веб-страниц? Рассмотрите возможность проведения базового аудита вашего существующего контента, чтобы увидеть, где вы можете включить замещающий текст в изображения, ранее не отмеченные тегами. Посмотрите, как меняется ваш органический трафик на страницах, которым вы добавляете новые теги alt.
Чем больше изображений вы оптимизируете, тем лучше будет продвигаться ваша SEO-стратегия.
Примечание редактора: этот пост был первоначально опубликован в сентябре 2018 года и обновлен для полноты.
Темы:
Техническое SEO
Не забудьте поделиться этим постом!
Напишите хороший альтернативный текст для описания изображений
Некоторые люди лучше понимают сложную информацию, когда она представлена визуально, например, в виде диаграммы или диаграммы, в то время как другие считают, что чтение информации им больше подходит. Людям, использующим программы чтения с экрана, для понимания важен хороший текстовый эквивалент информации, представленной в графическом виде.
Для простой графики обычно подходит лаконичный, информативный текст. Но для сложной графики недостаточно предоставить пользователю программы чтения с экрана только короткий альтернативный текст, например «график населения». Вам также необходимо подумать об информации, которую передает графика, например о категориях отображаемых данных, тенденциях, а также максимальных и минимальных значениях.
Пример
В этом примере мы собираемся предоставить текстовую альтернативу для графика, используя HTML, чтобы присвоить графику атрибут alt и некоторый видимый текст для предоставления дополнительной информации.
Альтернативный текст для графика (предоставляемый через его атрибут alt, который вы можете добавить при загрузке изображения с помощью веб-редактора) был бы слишком длинным, если бы он описывал все на графике, поэтому он просто описывает назначение графика. И, поместив этот абзац первым, мы гарантируем, что пользователи программ чтения с экрана смогут получить необходимую им информацию.
Источники СМИ для войны в Ираке
Анализ освещения в СМИ периода войны в Ираке отнюдь не был универсально объективным. На самом деле ясно, что освещение в целом было провоенным, причем американские источники новостей были немного более провоенными, чем источники из-за пределов США. Нейтральное освещение составило 26%, в то время как меньшинство источников было настроено против войны.
Только 3% американских источников попали в эту категорию.
См. также: Опишите содержание изображений ✎, Слепой, Слабое зрение, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Альтернативы, Изображения, HTML, SVG
Некоторым людям с трудностями чтения или нарушениями зрения необходимо настроить отображение текста, чтобы его было легче читать. Когда текст представлен в виде изображения текста, это ограничивает их возможности изменять внешний вид этого текста. Поэтому везде, где это возможно, используйте текст вместе с CSS для применения стиля (например, цвета, шрифта или размера).
Если вы используете онлайн-редактор контента для написания контента, стиль будет выполнен автоматически. Если вы чувствуете, что вам нужен текст, отличающийся от стиля, параметры форматирования, предоставляемые онлайн-редакторами контента, должны позволить вам обновить стиль для этого текста.
Только в крайних случаях, например при использовании логотипа, следует предоставлять изображение текста, а не текста. Если вы сделаете это, вам нужно будет предоставить тот же текст, что и альтернативный текст изображения, чтобы пользователи программ чтения с экрана могли получить доступ к тексту.
Примеры
✗ Плохой пример
В WYSIWYG-редакторе можно загрузить изображение какого-нибудь текста (скажем, «вкусных блинчиков») и вставить его на страницу с альтернативным текстом, точно совпадающим с текстом:
Одним из недостатков здесь является то, что программы чтения с экрана в некоторых контекстах будут читать альтернативный текст с добавлением «графика», и вы можете не хотеть, чтобы пользователь знал, что текст на самом деле является изображением. Кроме того, текст внутри изображения нельзя перевести на другие языки, выбрать для копирования/вставки или изменить размер без ухудшения качества.
✓ Используйте CSS и веб-шрифты
Напишите текст как текст в редакторе и позвольте системе публикации применить стиль.
Текст будет оформлен с использованием веб-шрифтов и свойств CSS, таких как background , text-shadow и color .
.pancakes-текст {
семейство шрифтов: PancakeFont, FallbackFont, без засечек;
цвет: песочно-коричневый;
text-shadow: 0.02em 0.02em 0 Коричневый,
0 0 0.5em фиолетовый;
}
Редактор кода
Вы можете поэкспериментировать со стилями текста CSS в этом редакторе кода, используя приведенные выше правила в качестве отправной точки.
См. перо
Стилизация текста CSS от HUIT — службы веб-доступа, UX и цифровой доступности (@hwpdas)
на КодПене.
См. также: Описание содержания изображений ✎, Дизайн для удобочитаемости ✎, Поддержка гибкости и адаптации ✎, Слепой, Слабовидящий, Когнитивный, Программа чтения с экрана, Увеличение экрана, Режим высокой контрастности, Пользовательская таблица стилей, Воспринимаемый, Изображения, Текст, CSS , HTML
Люди различаются тем, как они могут (или хотят) потреблять информацию, особенно в образовательных контекстах.
Некоторые люди могут предпочесть информацию, представленную в виде текста, видео или аудио; и их потребности в доступности также могут влиять на их предпочтения.
Но в то время как доступность для изображений часто фокусируется на предоставлении текстовой альтернативы для пользователей программ чтения с экрана, мы также можем посмотреть на проблему с другой стороны — предоставить графическую альтернативу тексту, чтобы облегчить понимание лежащей в основе информации или концепции. Это включает в себя для людей с трудностями чтения.
Пример
Представьте себе, что для описания — в данном случае — распределения источников энергии для производства электроэнергии в Румынии были использованы некоторые прозы:
«Однако, когда мы рассматриваем тенденции энергопотребления дальше на восток в Европе, мы можем рассмотреть в качестве примера карпатскую нацию Румынии. Здесь мы находим интересную картину, когда электричество обеспечивается различными источниками энергии, при этом ни один источник энергии не составляет явное большинство.
Согласно самой последней доступной нам статистике, мы видим, что гидроэлектроэнергия является наиболее распространенным источником чуть более одной трети (36%), за которым следует уголь (33%), затем атомная энергия (19%).%), а газ – 10 %. Завершая картину Румынии, мы обнаруживаем, что другие источники энергии составляют оставшиеся 2%».
Вся верная информация есть, но она скрыта среди множества ненужного многословия. Предоставляя кольцевую диаграмму для фиксации существенных моментов, мы можем быть более инклюзивными для тех, кто лучше усваивает информацию визуально. и помогают понять всех: наглядное представление процентов в виде сегментов облегчает сравнение пропорций.
См. также: Опишите содержание изображений ✎, Используйте изображения и мультимедиа для улучшения понимания ✎, Когнитивные, Воспринимаемые, Понятные, Изображения, HTML, PDF, Powerpoint, Word
Наиболее подходящий альтернативный текст для изображения во многом зависит от контекста рассматриваемого изображения.
Вы должны предоставить информацию об этом изображении с учетом его назначения, а также окружающего текста на странице. Одно и то же изображение может нуждаться в другом альтернативном тексте в зависимости от того, как оно используется.
Примеры
Давайте рассмотрим несколько примеров подходящего альтернативного текста с использованием одного и того же логотипа Гарвардского университета в разных контекстах.
Автономный
В этом базовом примере мы просто используем логотип Гарварда, чтобы указать, что страница связана с Гарвардским университетом. В этом случае в альтернативном тексте должно быть что-то вроде «Логотип Гарвардского университета».
Но если бы логотип был предоставлен в качестве примера дизайна логотипа, мы могли бы пойти дальше и выбрать что-то вроде «Логотип Гарвардского университета с черным текстом с засечками и красной эмблемой в виде щита», как в этом примере:
Внутри ссылки
В веб-дизайне принято использовать изображение логотипа в качестве ссылки на домашнюю страницу сайта.