Как создать альтернативный текст для доступности и SEO

1. Что такое альтернативный текст?
2. Используется несколькими способами:
3. Как добавить альтернативный текст к изображениям
4. Альтернативный текст и подписи
5. Альтернативные текстовые рекомендации
6. 1. Точно опишите содержание и функции изображения
7. 2. Чем короче, тем лучше, но не слишком коротким
8. 3. Используйте правильную пунктуацию и орфографию
9. 4. Вам не нужен заголовок для доступности, но он может быть полезен по другим причинам.
10. 5. Не включайте «изображение», «фотографию» и т. Д.
11. 6. Если ваше изображение содержит текст, оно должно быть включено в альтернативный текст
12. 7. Не полагайтесь на свою проверку доступности
13. 8. Изображения со ссылками должны включать назначение ссылки в альтернативном тексте.
14. Альтернативный текст для диаграмм, графиков и таблиц
15. Альтернативный текст и SEO

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

В Соединенных Штатах Закон об американцах-инвалидах (ADA) требует, чтобы весь цифровой контент был доступен для людей с ограниченными возможностями. Другие страны имеют свои собственные требования. Для людей, которые используют программы чтения с экрана или другие вспомогательные технологии для доступа к цифровому контенту, доступный контент крайне важен для обеспечения того, чтобы они могли получать доступ к контенту и понимать его так же, как это делает тот, кто не нуждается в помощи.

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

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

Используется несколькими способами:

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

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

Как добавить альтернативный текст к изображениям

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

Например, в Microsoft Word щелкните правой кнопкой мыши изображение и выберите «Добавить альтернативный текст». Затем добавьте свой текст в окно альтернативного текста на открывшейся боковой панели. Когда вы закончите, просто закройте боковую панель, и ваш альтернативный текст будет сохранен с изображением.

Альтернативный текст и подписи

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

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

Альтернативные текстовые рекомендации

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

1. Точно опишите содержание и функции изображения

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

2. Чем короче, тем лучше, но не слишком коротким

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

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

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

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

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

Или, может быть, статья о ширине скоса на экране компьютера, так что вместо этого нужно будет подробнее об этом.

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

3. Используйте правильную пунктуацию и орфографию

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

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

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

Большинство современных браузеров автоматически проверяют орфографию, поэтому, если вы пишете что-то в системе управления контентом (CMS) или в Документах Google, вполне вероятно, что ваша орфография и грамматика будут проверены, но это хорошая практика, чтобы корректировать независимо.

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

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

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

Тем не менее, вы никогда не должны жертвовать четким и кратким альтернативным текстом, который точно описывает изображение в пользу выигрыша дополнительной точки или двух по шкале SEO.

5. Не включайте «изображение», «фотографию» и т. Д.

Когда программа чтения с экрана встречает изображение, она сообщает пользователю, что столкнулась с изображением. Таким образом, если ваш альтернативный текст содержит фразу «изображение», программа чтения с экрана скажет что-то вроде «Изображение. Изображение экрана компьютера… »

6. Если ваше изображение содержит текст, оно должно быть включено в альтернативный текст

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

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

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

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

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

7. Не полагайтесь на свою проверку доступности

Многие инструменты для создания контента, такие как Microsoft Word и Adobe Acrobat, поставляются с полезными контролерами доступности. Они сканируют контент и ищут типичные ошибки, которые делают создатели контента, которые могут сделать контент недоступным. Они великолепны, и вы обязательно должны использовать их для проверки своего контента.

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

8. Изображения со ссылками должны включать назначение ссылки в альтернативном тексте.

Еще один аспект доступного контента заключается в том, что все гиперссылки должны описывать пользователю, куда он их приведет. По этой причине такие ссылки, как «нажмите здесь» или «посетите нас», как правило, запрещены.

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

Альтернативный текст для диаграмм, графиков и таблиц

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

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

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

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

Альтернативный текст и SEO

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

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

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

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

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

Вы создаете альтернативный текст для изображений, включенных в ваш цифровой контент? Я хотел бы услышать ваши предложения, идеи и борьбу!

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

связанные с

Похожие

Комментарии