WebAIM: альтернативный текст

1. Вступление Добавление альтернативного текста для изображений является первым принципом веб-доступности....
2. Контекст - это все
3. Пример 1
4. Пример 2
5. Пример 3
6. Пример 4
7. Функциональные изображения
8. Пример 5
9. Пример 6
10. Пример 7
11. Декоративные изображения
12. Пример 8
13. Пример 9
14. Заключение

Вступление

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

Важный

Также смотрите наш статья об изображениях для получения дополнительной информации о доступности изображений.

Основы альтернативного текста

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

Альтернативный текст выполняет несколько функций:

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

Ключевой принцип заключается в том, что компьютеры и программы чтения с экрана не могут анализировать изображение и определять, что изображение представляет. Как разработчики, текст должен быть предоставлен пользователю, который представляет СОДЕРЖАНИЕ и ФУНКЦИЮ изображений в вашем веб-контенте.

Альтернативный текст может быть представлен двумя способами:

• Внутри атрибута alt элемента img.
• В контексте или окружении самого изображения.

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

Важный

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

Каждое изображение должно иметь атрибут alt. Это требование стандарта HTML (возможно, с некоторыми исключениями в HTML5). Изображения без атрибута alt, вероятно, недоступны. В некоторых случаях изображения могут иметь пустой или нулевой атрибут alt (например, alt = "").

Контекст - это все

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

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

Заметка

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

Пример 1

Из-за своей роли главнокомандующего американскими войсками в войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом его страны».

Какой будет подходящий альтернативный текст для изображения в Примере 1?

1. «Образ Джорджа Вашингтона»
2. «Джордж Вашингтон, первый президент США»
3. Пустого атрибута alt (alt = "") будет достаточно.
4. "Джордж Вашингтон"

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

Давайте посмотрим на некоторые важные правила, касающиеся атрибута alt.

Важный

Атрибут alt обычно должен:

• Будьте точны и эквивалентны в представлении того же содержания и функции изображения.
• Будь кратким. Это означает, что правильное содержание (если есть содержимое) и функция (если есть функция) изображения должны быть представлены так кратко, как это необходимо. Обычно требуется не более нескольких слов, хотя редко бывает уместно короткое предложение или два.
• НЕ быть избыточным или предоставлять ту же информацию, что и текст в контексте изображения.
• НЕ используйте фразы «изображение ...» или «рисунок ...» для описания изображения. Для пользователя обычно очевидно, что это изображение. И если изображение передает контент, обычно нет необходимости, чтобы пользователь знал, что это изображение передает текст, а не текст. Если факт, что изображение является фотографией или иллюстрацией и т. Д., Является важным содержанием, может быть полезно включить это в альтернативный текст.

Исходя из этих правил, вариант D (alt = "Джордж Вашингтон"), вероятно, будет лучшим альтернативным текстом в этом случае. Вариант А излишне описывает изображение как изображение. Опция B предоставляет дополнительную информацию, которая не представлена ​​непосредственно на изображении, и она также избыточна с содержанием, представленным позже в тексте. Опция C (без атрибута alt) не подходит, потому что изображение передает контент, который непосредственно не представлен в окружающем контексте. Несмотря на то, что окружающий текст указывает на то, что он имеет в виду Джорджа Вашингтона, визуальные пользователи могут сказать это непосредственно из содержимого изображения - поэтому, если изображение передает содержимое, ему должен быть предоставлен альтернативный текст.

Пример 2

Джордж Вашингтон

Из-за своей роли главнокомандующего американскими войсками в войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом его страны».

Каким будет соответствующий атрибут alt для изображения в Примере 2?

1. "Джордж Вашингтон"
2. Пустого атрибута alt (alt = "") будет достаточно.
3. "Образ"
4. Изображение не нуждается в атрибуте alt.

В этом случае содержимое изображения представляется внутри окружающего содержимого, поэтому вариант B (alt = "") является лучшим выбором. Вариант А будет излишним. Вариант C предоставляет постороннюю и бесполезную информацию. Вариант D (без атрибута alt) никогда не является правильным выбором - каждое изображение должно иметь атрибут alt.

Пример 3

Джордж Вашингтон

Каким будет соответствующий атрибут alt для изображения в Примере 3?

1. Пустого атрибута alt (alt = "") будет достаточно.
2. "Википедия для Джорджа Вашингтона"
3. "Прочитайте больше"
4. "Джордж Вашингтон"

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

Вариант А не подходит. Изображение, которое является единственным в ссылке, никогда не должно иметь отсутствующего или нулевого атрибута alt. Это потому, что программа чтения с экрана должна читать что-то, чтобы идентифицировать ссылку. Программы чтения с экрана могут прочитать имя файла изображения или URL-адрес страницы, на которую указывает ссылка, что может быть полезным, а может и не быть полезным. И помните, что ссылка может быть прочитана вне контекста окружающего текста, например, когда пользователь перемещается по ссылкам на странице. Опция B предоставляет контент, который недоступен только через изображение (т. Е. Вы не можете указать ссылки на изображения в Википедии, просто взглянув на них). Вариант C не дает адекватного описания функции, особенно вне контекста.

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

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

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

Пример 4

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

Что было бы наиболее подходящим атрибутом alt для изображения в Примере 4?

1. "Джордж Вашингтон"
2. "Картина Джорджа Вашингтона"
3. "Картина Джорджа Вашингтона, пересекающего реку Делавэр"
4. «Классическая картина, демонстрирующая использование света и цвета для создания композиции».
5. «Картина Джорджа Вашингтона, пересекающего реку Делавэр. Вокруг лодки кружатся волны, где величественный Джордж Вашингтон смотрит вперед из шторма и в лучи света через реку, когда он ведет свои осторожные войска в бой».

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

Вариант А («Джордж Вашингтон»), вероятно, не адекватно описывает содержание изображения. Тот факт, что на картине изображен Джордж Вашингтон, не обязательно имеет значение в этом контексте. Вариант B («Картина Джорджа Вашингтона») может быть адекватным, но не предоставляет много дополнительного контента. Однако может быть целесообразно описать изображение как картину, в отличие от фотографии или другого типа изображения. Вариант C предоставляет больше информации, которая может помочь пользователю идентифицировать сам контент. Помните, что альтернативный текст не только для слепых. Многие зрячие пользователи смогут определить конкретную картину, о которой идет речь, с учетом этого описания, тогда как «Джордж Вашингтон» сам по себе не будет достаточно описательным. Вариант D может быть уместным, если цель изображения состоит в том, чтобы представить конкретную художественную технику, а содержание самого изображения не имеет значения. Вариант E также может быть подходящей альтернативой, если требуется подробный анализ картины, но он слишком длинный и многословный, чтобы его можно было использовать - такой текст лучше использовать в качестве текста на веб-странице.

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

Функциональные изображения

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

Пример 5

Изображение «Продукты» является частью панели навигации.

Какой атрибут alt будет наиболее подходящим для навигационного изображения «Продукты» в примере 5?

1. "Товары"
2. «Ссылка на товары»
3. Изображение не передает контент, поэтому (alt = "") будет достаточно.

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

Пример 6

Перейдите на следующую страницу, чтобы прочитать о президентстве Джорджа Вашингтона.

Что будет наиболее подходящим атрибутом alt для изображения с синей стрелкой в ​​примере 6?

1. "следующий"
2. "следущая страница"
3. «Президентство Джорджа Вашингтона»
4. «Продолжать президентство Джорджа Вашингтона»

Опять же, это пример, который не имеет четкого лучшего ответа. На самом деле, любой из вариантов может быть подходящим в этом примере. Вариантов A и B, вероятно, будет достаточно в большинстве случаев, если пользователю ясно, что в статье несколько страниц. Вариант C очень четко представляет функцию ссылки, но не указывает, что ссылка идет на следующую страницу в серии. Вариант D может быть лучшим решением, поскольку он представляет функцию ссылки и передает, что она является частью серии страниц. Как указывалось ранее, определение наиболее подходящего альтернативного текста зависит от личной интерпретации, основанной на более широком контексте рассматриваемого изображения. Описание этого изображения («стрелка») не подходит. Возможно, лучшим решением было бы иметь текст «Следующая страница» или аналогичный рядом с изображением и внутри ссылки, и в этом случае изображению может быть дан нулевой альтернативный текст.

Пример 7

Какой атрибут alt будет наиболее подходящим для изображения значка в примере 7? Обратите внимание, что значок находится внутри ссылки.

1. «Заявление о приеме на работу»
2. «PDF-файл»
3. «Значок PDF»
4. Содержание изображения представлено в контексте, поэтому (alt = "") является подходящим.

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

Вариант А («Заявление о приеме на работу») избыточен с окружающим текстом, поэтому он не является лучшим выбором. Вариант B - лучший выбор (хотя, возможно, даже более краткого «PDF» будет достаточно) - он четко предоставляет контент, представленный изображением, - что ссылка представляет собой файл PDF. Функция («Загрузить заявление о трудоустройстве») представлена ​​в тексте ссылки, поэтому ее не нужно снова включать в атрибут alt. Вариант C («значок PDF») действительно описывает само изображение, поэтому оно не наиболее подходит для этого контекста. В другом контексте может быть важно, чтобы пользователь знал, что это изображение действительно является значком. Вариант D (нулевой или пустой альтернативный текст) не предоставит важную информацию, которую представляет изображение.

Здесь важно отметить, что, если бы сам значок был ссылкой на документ, альтернативный текст должен был предоставить полную альтернативу содержанию и функции комбинации ссылка / изображение. Что-то типа «Скачать заявку на трудоустройство в формате PDF». «PDF формат» сам по себе не будет достаточным, особенно если есть несколько документов со ссылками такого рода. В этом случае пользователь программы чтения с экрана, который перемещается по ссылкам на странице, услышит: «Формат PDF, формат PDF, формат PDF ...» Как правило, если одно и то же изображение используется на странице несколько раз, чтобы ссылка на разные места, альтернативный текст в ссылке должен выявить различия.

Декоративные изображения

Декоративные изображения не представляют важного содержания, используются для макета или в неинформативных целях и не отображаются внутри ссылки. Почти во всех случаях распорные и декоративные изображения должны иметь нулевой альтернативный текст (alt = "").

Пример 8

Содержание текста здесь.

Текст нижнего колонтитула здесь.

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

1. "декоративная линия"
2. «Начало нижнего колонтитула»
3. "разделитель"
4. alt = "" будет достаточно

Поскольку изображение не передает контент и не находится внутри ссылки, вариант D является наиболее подходящим выбором. Описание изображения не подходит.

Заметка

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

Пример 9

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

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

Каким будет соответствующий атрибут alt для изображения в Примере 9?

1. "рукопожатие"
2. «Бизнесмены пожимают друг другу руки, чтобы завершить контракт»
3. alt = "" будет достаточно
4. «Мы гарантируем наши профессиональные услуги»

Анализируя этот пример, определите, представляет ли изображение важный контент. В этом случае я бы сказал, что это не так. В современной практике в Интернете многие такие изображения получают описательный альтернативный текст, хотя изображения, по-видимому, не дают полезного контента. Вариант C (alt = ""), вероятно, был бы наиболее подходящим в этом случае, потому что изображение не передает релевантное или важное содержание. Параметры A и B описывают изображение, но не передают эквивалент того, что передает само изображение - что в данном случае является ничем, или, возможно, только эмоциональным настроением или чувством. Другими словами, изображение в основном декоративное. Вариант D явно не верен, хотя стоит отметить, что дополнительная информация часто вводится в альтернативный текст для предоставления дополнительной информации или для предоставления дополнительных ключевых слов поисковым системам. Такая практика не подходит для использования альтернативного текста.

Заметка

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

В приведенном выше примере маловероятно, что фотография рукопожатия будет заменена текстом, поэтому, вероятно, достаточно alt = "".

Заключение

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

• Добавление альтернативного текста к изображениям является одним из самых простых принципов доступности для изучения и одним из самых сложных для освоения.
• Альтернативный текст может быть предоставлен в атрибуте alt или в окружающем контексте изображения.
• Каждое изображение должно иметь атрибут alt.
• Альтернативный текст должен :
  • представить содержание и функции изображения.
  • быть кратким.
• Альтернативный текст не должен :
  • быть избыточным (быть таким же, как соседний или основной текст).
  • используйте фразы «изображение…» или «рисунок…».
• Подходящий альтернативный текст сильно зависит от контекста изображения.
• Альтернативный текст функционального изображения (например, изображение в ссылке) должен описывать как функцию, так и контент.
• Декоративным изображениям все еще нужен атрибут alt, но он должен быть нулевым (alt = "").

Доступ к Интернету в целом значительно увеличился бы, если бы альтернативный текст был предоставлен и реализован правильно.

Похожие

Комментарии