Доступные изображения на первый взгляд могут показаться простой темой — достаточно добавить к изображению «альтернативный текст», и всё готово. Но на самом деле эта тема гораздо сложнее, чем кажется. В этом разделе мы рассмотрим:
- Как обновить код, чтобы сделать изображения доступными.
- Какую информацию следует предоставлять пользователям и куда её следует передавать.
- Дополнительные способы улучшения ваших изображений для поддержки людей с ограниченными возможностями.
Цель и контекст изображения
Прежде чем написать хотя бы одну строчку кода, подумайте о назначении точечного изображения, о том, где оно будет храниться и как будет использоваться. Задавая себе эти вопросы, вы сможете определить, как лучше всего передать информацию человеку, использующему вспомогательные технологии (ВТ) , например, программу чтения с экрана.
Вы можете задать себе вопрос:
- Является ли изображение необходимым для понимания контекста статьи или страницы?
- Какую информацию пытается передать это изображение?
- Изображение простое или сложное?
- Вызывает ли изображение эмоции или побуждает ли пользователя к действию?
- Или же это просто визуальное "украшение", не имеющее реального смысла?
Визуальная блок-схема, например, дерево решений для изображений , может помочь вам определить, к какой категории относится ваше изображение.
Попробуйте скрыть изображения на вашем сайте или в веб-приложении с помощью расширения для браузера или другими способами. Затем спросите себя: «Понимаю ли я оставшийся контент?» Если ответ «да», то, скорее всего, это декоративное изображение. Если нет, то изображение носит информативный характер и необходимо в контексте. Как только вы определите назначение изображения, вы сможете определить наиболее точный способ его кодирования.
Декоративные изображения
Декоративное изображение — это визуальный элемент, который не добавляет дополнительного контекста или информации, позволяющей пользователю лучше понять контекст. Декоративные изображения являются вспомогательными и могут придавать скорее стиль, чем содержание.
Если вы решили, что изображение является декоративным, его необходимо программно скрыть от вспомогательных технологий (ВТ). Программное скрытие изображения сигнализирует ВТ о том, что изображение не требуется для понимания содержимого страницы, контекста или действий. Существует множество способов скрыть изображения, включая использование пустого или нулевого текстового альтернативного варианта, применение ARIA или добавление изображения в качестве фона CSS. Вот несколько примеров того, как скрыть декоративное изображение от пользователей.
Пустой или нулевой alt
Пустой или нулевой атрибут альтернативного текста отличается от отсутствующего атрибута альтернативного текста. Если атрибут альтернативного текста отсутствует, вспомогательная технология может зачитать имя файла или окружающее содержимое, чтобы предоставить пользователю дополнительную информацию об изображении.
Роль установлена на presentation или none
Роль, установленная на presentation " или none , исключает семантику элемента из дерева доступности. В то же время, aria-hidden= "true" удаляет весь элемент — и все его дочерние элементы — из API доступности.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Используйте aria-hidden с осторожностью, так как он может скрывать элементы, которые вы не хотите скрывать.
Изображения в CSS
При добавлении фонового изображения с помощью CSS программа чтения с экрана не сможет обнаружить файл изображения. Перед применением этого метода убедитесь, что вы действительно хотите скрыть изображение.
Информативные изображения
Информативное изображение — это изображение, передающее концепцию, идею или эмоцию. К информативным изображениям относятся фотографии реальных объектов, основные значки, простые рисунки и изображения текста .
Если ваше изображение носит информативный характер, следует добавить программно запрограммированный альтернативный текст , описывающий его назначение. Альтернативные описания изображений — часто сокращаемые как «alt text» — предоставляют пользователям вспомогательных технологий больше контекста об изображении и помогают им лучше понять его смысл или цель.
Вы можете добавить альтернативные описания к элементам <img> , указав атрибут alt . Это относится ко всем типам файлов, включая JPG, PNG и SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Однако при использовании элементов <svg> непосредственно в тексте необходимо уделять дополнительное внимание доступности. SVG-изображения имеют семантический код, поэтому адаптивные технологии по умолчанию их пропускают.
Если SVG-файл является декоративным изображением, это нормально — автоматизированная система его проигнорирует, как и предполагалось. Но если ваш SVG-файл является информативным изображением, добавьте к элементу атрибут ARIA role="img" , чтобы автоматизированная система распознала его как изображение.
Во-вторых, элементы <svg> не используют атрибут alt , поэтому для добавления альтернативных описаний к информативным изображениям необходимо использовать другие методы кодирования .
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Функциональные изображения
Функциональное изображение связано с действием. Примером функционального изображения может служить логотип, ведущий на главную страницу, увеличительное стекло, используемое в качестве кнопки поиска, или иконка социальной сети, перенаправляющая на другой веб-сайт или в приложение.
Подобно информативным изображениям, функциональные изображения должны включать альтернативное описание, чтобы проинформировать всех пользователей об их назначении. В отличие от информативного изображения, каждое функциональное изображение должно описывать действие, которое оно совершает, а не визуальные аспекты.
В примере с логотипом изображение одновременно информативно и полезно, поскольку оно передает информацию и служит ссылкой. В подобных случаях можно добавить альтернативные описания к каждому элементу, но это не обязательно.
Один из способов добавить альтернативные описания к изображениям — визуально скрытый текст. При использовании этого метода текст считывается программами чтения с экрана, поскольку он находится в DOM, но визуально скрывается с помощью пользовательских CSS-стилей.
Как видно из фрагмента кода, «Перейти на главную страницу» — это заголовок-оболочка, а альтернативный текст изображения — «Прекрасные божьи коровки для вашего газона». Если прослушать код логотипа с помощью программы чтения с экрана, вы услышите и визуальное оформление, и действие, передаваемые одним изображением.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Сложные изображения
Сложное изображение часто требует более подробного объяснения, чем декоративное, информационное или функциональное изображение. Для передачи полного смысла необходимо как краткое, так и развернутое описание. К сложным изображениям относятся инфографика, карты, графики/диаграммы и сложные иллюстрации.
Как и в случае с другими типами изображений, существуют различные методы добавления альтернативных описаний к сложным изображениям.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Один из способов добавить дополнительное пояснение к изображению — это разместить ссылку на ресурс или предоставить прямую ссылку на более подробное объяснение на странице. Этот метод хорош не только для пользователей вспомогательных технологий, но и помогает людям с ограниченными возможностями — например, с когнитивными, учебными и читательскими нарушениями — которым может быть полезно иметь эту дополнительную информацию об изображении сразу на экране, а не спрятанной в коде.
Ещё один способ — добавить атрибут aria-describedby к элементу <img> . Таким образом, можно программно связать изображение с идентификатором, содержащим более подробное описание. Этот метод создаёт прочную связь между изображением и полным описанием. Расширенное описание может отображаться на экране или быть визуально скрыто — но лучше оставить его видимым, чтобы оно было доступно ещё большему количеству людей.
Ещё один способ сгруппировать короткие альтернативные описания с более длинным — использовать элементы <figure> и <figcaption> . Эти элементы действуют аналогично aria-describedby , семантически группируя элементы и формируя более прочную связь между изображением и его описанием.
Добавление атрибута ARIA role="group" обеспечивает обратную совместимость со старыми веб-браузерами, которые не поддерживают семантику элемента <figure> .
Рекомендации по использованию альтернативных текстов
Конечно, простого добавления текста недостаточно. Текст также должен быть осмысленным. Например, если на вашем изображении рой божьих коровок грызет листья вашего любимого розового куста, а в альтернативном тексте написано «жуки», передаст ли это полное сообщение и смысл изображения? Определенно нет.
Альтернативные описания должны содержать как можно больше релевантной визуальной информации и быть лаконичными. Хотя количество символов, которые может прочитать программа чтения с экрана, не ограничено, обычно рекомендуется ограничить альтернативный текст 150 символами или меньше, чтобы избежать утомления читателя. Если вам нужно добавить дополнительный контекст к изображению, вы можете использовать один из сложных шаблонов изображений, добавить подпись или более подробно описать изображение в основном тексте.
К числу дополнительных рекомендаций по использованию альтернативных текстов относятся:
- Избегайте использования в описании таких слов, как «изображение» или «фотография», поскольку программа чтения с экрана сама определит эти типы файлов.
- При именовании изображений старайтесь быть максимально последовательными и точными. Названия изображений служат запасным вариантом, если альтернативный текст отсутствует или игнорируется.
- Избегайте использования небуквенных символов (например, #, 9, &) и используйте дефисы между словами вместо подчеркиваний в названиях изображений или альтернативном тексте.
- По возможности используйте правильную пунктуацию. Без неё описания изображений будут звучать как одно длинное, бесконечное, нелогичное предложение.
- Пишите альтернативный текст как человек, а не как робот. Перенасыщение ключевыми словами никому не принесет пользы — это будет раздражать пользователей программ чтения с экрана, а алгоритмы поисковых систем накажут вас.