Декоративные изображения: Как отличить контентное изображение от декоративного — Блог HTML Academy

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

Введение

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

Важно

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

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

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

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

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

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

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

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

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

Важно

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

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

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

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

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

Примечание

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

Пример 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 = "" ) будет достаточно.

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

Пример 6

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

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

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

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

Пример 7

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

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

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

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

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

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

Декоративные изображения не представляют важного содержания, используются в макетных или неинформативных целях и не отображаются в ссылке. Почти во всех случаях разделители и декоративные изображения должны иметь пустые значения атрибутов alt ( 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 должен представлять любой контент, который представлен с изображением, но не представлен с горячими точками карты изображения. Например, если у вас есть карта штата Нью-Йорк, на которой есть горячие точки для каждого региона, изображение может иметь значение атрибута alt «Регионы Нью-Йорка». Если основное изображение не передает контент, а в первую очередь является контейнером для горячих точек (например, панель навигации), тогда подходит alt = "" .

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

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

Срезы изображения

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

Фоновые изображения

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

Однако фоновые изображения

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

Иногда для представления контента используются спрайты изображений или другие фоновые изображения. Хотя их обычно следует избегать, если они используются, любой контент, передаваемый через фоновое изображение, должен быть доступен в разметке страницы. Если вместо изображения значка PDF в примере 7 выше было представлено фоновое изображение CSS, вы могли бы использовать технику замены текста для представления содержимого в ссылке:

Загрузите заявление о приеме на работу (PDF)

Затем вы можете использовать CSS для размещения текста «(PDF)» (элемент span ) за пределами экрана.См. CSS в действии: невидимое содержимое только для пользователей программ чтения с экрана для получения дополнительных сведений. Зрячие пользователи увидят фоновое изображение PDF, а пользователи программ чтения с экрана услышат закадровый текст «(PDF)».

Логотипы

В Интернете распространена практика, когда основной логотип сайта также ссылается на главную страницу сайта. Поскольку это довольно стандартная практика, обычно достаточно предоставить альтернативный текст для изображения, например название вашей компании ( alt = "Acme Company )».Идентификация логотипа как фактического логотипа ( alt = "Логотип компании Acme" ) обычно не требуется. Содержание и функции не являются «логотипом». Разработчики часто идентифицируют изображение как ведущее на главной странице ( alt = "Домашняя страница компании Acme ), хотя, если изображение постоянно находится в начале страницы и альтернативный текст уместен, эта дополнительная информация не требуется.

Сложные изображения

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



Просмотреть данные о продажах

Примечание к longdesc

Атрибут longdesc был предназначен для ссылки на страницу с подробным описанием. Значение атрибута longdesc элемента img будет содержать URL-адрес страницы подробного описания, а не НЕ сам текст подробного описания. Однако longdesc работает только с некоторыми программами чтения с экрана. Кроме того, зрячие пользователи обычно не знают, что страница описания доступна.Кроме того, атрибут longdesc не является частью HTML5. По этим причинам не рекомендуется полагаться на longdesc на при предоставлении доступа к этой странице с длинным описанием.

Мы представили обзор поддержки longdesc (проведен в сентябре 2015 г.).

Рисунок и figcaption

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

figure и figcaption позволяют семантическую ассоциацию между рисунком и подписью к нему. figcaption может предоставлять сводку или дополнительную информацию о фигуре и / или связывать фигуру с содержащимся в ней документом. Однако любое изображение внутри рисунка должно по-прежнему иметь значение атрибута alt , представляющее альтернативный текст изображения — это не должно передаваться через figcaption .

Вы можете узнать больше о figure и figcaption в How do you figure?

Заключение

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

• Добавление альтернативного текста к изображениям — один из самых простых способов доступа принципы, которые нужно изучить, и одни из самых сложных для освоения.
• Альтернативный текст может быть предоставлен в атрибуте alt или в окружающем контексте изображения.
• Каждое изображение должно иметь атрибут alt .
• Альтернативный текст следует :
  • представляют СОДЕРЖАНИЕ и ФУНКЦИЮ изображения.
  • будьте лаконичны.
• Альтернативный текст не должен :
  • быть избыточным (быть таким же, как смежный или основной текст).
  • используйте фразы «изображение…» или «изображение…».
• Соответствующий альтернативный текст сильно зависит от контекста изображения.
• Альтернативный текст функционального изображения (например, изображения в ссылке) должен описывать функция, а также содержание.
• Для декоративных изображений по-прежнему требуется атрибут alt , но он должен быть пустым ( alt = "" ).

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

Рекомендации по использованию замещающего текста

Image — Центр поддержки Siteimprove

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

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

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

При использовании альтернативного текста изображения он не должен включать:

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

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

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

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

HTML:

(Источник изображения короля Англии Генриха VIII)

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

HTML:

(Источник изображения Центрального парка в Нью-Йорке с воздуха)

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

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

(две кавычки после alt =)

HTML:

(Источник декоративного изображения)

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

Изображение с текстом

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

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

HTML:

(Источник быстрой коричневой лисы перепрыгивает через изображение ленивой собаки)

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

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

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

Пример 1: Изображение, используемое отдельно в качестве связанного логотипа

Следующее изображение содержит ссылку, которая ведет на веб-страницу Siteimprove и отображается без какого-либо другого текста ссылки. В нем есть альтернативный текст «Siteimprove home», указывающий, куда пользователь перейдет по ссылке.

Пример 2: Изображение в тексте ссылки

В этом примере изображение используется для дополнения текста в ссылке, ведущей на веб-сайт Siteimprove.Изображение не представляет полную функциональность и не передает другую информацию, кроме той, которая уже предоставлена ​​в тексте ссылки, поэтому применяется нулевое (пустое) значение (alt = «»), чтобы избежать избыточности и повторения.

Siteimprove Home

Siteimprove Home

Дополнительные ресурсы

Доступность изображений 101: декоративные изображения

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

Советы по написанию альтернативного текста:

1) Для этих изображений вы хотите оставить атрибут alt пустым ( alt = "" ).

Примеры:

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

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

  .share-img {
    фоновое изображение: url ('../ images / share.jpg');
    размер фона: обложка;
    дисплей: блок;
    высота: 27,3 бэр;
    ширина: 100%;
}
  

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

Важные заметки:

1) Хотя атрибут alt остается пустым, он все равно должен присутствовать внутри тега . Если не указывать полностью, программа чтения с экрана обычно зачитывает имя файла изображения.Это может сбивать с толку пользователей.

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

3) Вы также можете использовать атрибут WAI-ARIA role = "presentation" , чтобы скрыть изображения от программ чтения с экрана, однако не все программы чтения с экрана это признают. Итак, если вы собираетесь его использовать, обязательно соедините его с пустым атрибутом alt.

4) По возможности используйте псевдоэлементы и свойства фонового изображения в CSS для представления декоративных изображений.

Резюме

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

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

изображений | Удобство использования и веб-доступность

Загрузите учебные слайды «Доступность изображений для редакторов контента».

Содержание

1. Как люди с ограниченными возможностями взаимодействуют с изображениями
2. Альтернативный текст и длинные описания
3. Рекомендации по изображению
4. Изображения текста
5. Диаграммы, графики и другие сложные изображения
6. Рекомендации для разработчиков
   1. Все теги img должны иметь атрибуты alt
   2. Другие способы предоставления альтернативного текста
   3. Скрытие декоративных изображений от вспомогательных технологий
   4. Доступность SVG

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

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

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

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

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

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

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

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

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

(Разработчикам и редакторам содержимого следует избегать использования HTML-атрибута longdesc в целом. Как ни странно, длинные описания никогда не следует предоставлять непосредственно в longdesc .)

Руководство по изображению

Понимание того, что делает текст хорошим alt , — дело тонкое и важное. Он должен быть кратким: не более 250 знаков. Он должен передавать цель изображения, а не описывать его. При написании текста alt подумайте, какие детали были наиболее важными для автора. Одно и то же изображение может иметь совершенно разный текст или в зависимости от контекста. Дополнительные примеры см. На слайдах редактора содержимого вверху страницы.

Некоторые другие передовые практики включают:

Чтобы узнать больше об изображениях, обратите внимание на следующие ресурсы:

Изображения текста

Как правило, на веб-сайтах следует избегать изображений текста.Изображения текста лучше всего использовать, когда важна конкретная визуальная презентация, например, логотип. Если изображение представляет собой небольшой объем текста, текст alt должен точно соответствовать тексту на изображении. Если изображение содержит значительный объем текста, он также должен быть в другом месте на странице.

Как правило, текст в изображениях должен иметь достаточно большой размер, чтобы уменьшить пикселизацию при увеличении. Минимальный размер 19 пикселей — хорошее практическое правило, чем больше, тем лучше. Текст в изображениях должен соответствовать минимальным значениям цветовой контрастности.Для текста размером не менее 24 пикселей и нормальной толщиной или 19 пикселей и жирным шрифтом используйте коэффициент контрастности не менее 3: 1. В идеале используйте контраст не менее 4,5: 1.

Диаграммы, графики и другие сложные изображения

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

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

Альтернативный текст должен выглядеть примерно так: alt = "Требования Йельского колледжа к иностранному языку.См. Обсуждение ниже «.

Рекомендации для разработчиков

Все

тегов должны иметь alt атрибутов

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

или

Другие способы предоставления альтернативных текстов

Разработчики могут предоставить изображениям доступные имена с атрибутами aria-label и aria-labelledby . Когда эти атрибуты присутствуют, вспомогательные технологии будут игнорировать альтернативный текст изображения и вместо этого читать метку ARIA.

Разработчики могут связать текст в другом месте страницы с помощью атрибута aria-describeby . Это может быть особенно полезно при использовании подписей к сложным изображениям.

Разработчики также могут использовать

и