На первый взгляд доступные изображения могут показаться простой темой — вы добавляете к изображению «замещающий текст», и все готово. Но эта тема более тонкая, чем думают некоторые. В этом разделе мы рассмотрим:
- Как обновить код, чтобы сделать изображения доступными.
- Какой информацией следует делиться с пользователями и где ею делиться.
- Дополнительные способы улучшения изображений для поддержки людей с ограниченными возможностями.
Цель изображения и контекст
Прежде чем написать хотя бы одну строку кода, вы должны сначала подумать о значении изображения и о том, как оно будет использоваться. Задавая себе вопросы о цели и контексте изображения, вы можете определить, как лучше всего передать информацию человеку с помощью вспомогательных технологий (АТ), таких как программы чтения с экрана.
Вы можете спросить себя:
- Важно ли изображение для понимания контекста объекта или страницы?
- Какую информацию пытается передать изображение?
- Изображение простое или сложное?
- Вызывает ли изображение эмоции или побуждает пользователя к действию?
- Или это просто визуальное «услаждение для глаз» без какой-либо реальной цели?
Визуальная блок-схема, например дерево решений для изображений , может помочь вам решить, к какой категории принадлежит ваше изображение.
Попробуйте скрыть изображения на своем сайте или в веб-приложении с помощью расширения браузера или других методов. Затем спросите себя: «Понимаю ли я оставшееся содержание?» Если ответ положительный, скорее всего, это декоративное изображение. В противном случае изображение в некотором роде информативно и контекстно необходимо. Определив назначение изображения, вы сможете определить наиболее точный способ его кодирования.
Декоративные изображения
Декоративное изображение — это визуальный элемент, не добавляющий дополнительного контекста или информации, позволяющей пользователю лучше понять контекст. Декоративные изображения являются дополнительными и могут придавать скорее стиль, чем содержание.
Если вы решите, что изображение является декоративным, его необходимо программно скрыть от AT. Когда вы программируете скрытие изображения, это сигнализирует AT, что изображение не требуется для понимания содержания, контекста или действия страницы. Существует множество способов скрыть изображения, включая использование альтернативного пустого/нулевого текста, применение ARIA или добавление изображения в качестве фона CSS. Ниже приведены несколько примеров того, как скрыть от пользователей декоративное изображение.
Пустой или нулевой alt
Пустой/нулевой атрибут альтернативного текста отличается от отсутствующего атрибута альтернативного текста. Если атрибут альтернативного текста отсутствует, AT может считывать имя файла или окружающее содержимое, чтобы предоставить пользователю дополнительную информацию об изображении.
Роль установлена на 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, программа чтения с экрана не обнаружит файл изображения. Прежде чем применять этот метод, убедитесь, что вы хотите, чтобы изображение было скрыто.
Информативные изображения
Информативное изображение — это изображение, которое передает простую концепцию, идею или эмоцию. Типы информативных изображений включают фотографии объектов реального мира, основные значки, простые рисунки и изображения текста .
Если ваше изображение информативно, вам следует включить программный альтернативный текст , описывающий назначение изображения. Альтернативные описания изображений, часто сокращаемые как «замещающий текст», дают пользователям AT больше контекста изображения и помогают им лучше понять послание или намерение изображения.
Простые альтернативные описания с использованием элементов <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 закодированы семантически, AT по умолчанию пропустит их. Если у вас есть декоративное изображение, это не проблема — AT проигнорирует его, как и предполагалось. Но если у вас есть информативное изображение, к шаблону необходимо добавить ARIA role="img" для того, чтобы AT распознал его как изображение.
Во-вторых, элементы <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"></img>
</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>
Один из способов добавить дополнительное объяснение к изображению — это указать ссылку на ресурс или предоставить ссылку для перехода к более подробному объяснению позже на странице. Этот метод является хорошим выбором не только для пользователей AT, но также помогает людям с ограниченными возможностями (например, с когнитивными нарушениями, нарушениями обучения и чтения), которым может быть полезно иметь эту дополнительную информацию об изображении, легко доступную на экране, а не скрытую в коде.
Другой метод, который вы можете использовать, — добавить атрибут aria-describedby к элементу <img> . Вы можете программно связать изображение с идентификатором, содержащим более подробное описание. Этот метод создает прочную связь между изображением и полным описанием. Расширенное описание можно отобразить на экране или визуально скрыть, но рассмотрите возможность оставить его видимым, чтобы поддержать еще больше людей.
Еще один способ сгруппировать короткие альтернативные описания с более длинными — использовать элементы HTML5 <figure> и <figcaption> . Эти элементы действуют аналогично aria-describedby в том, что они семантически группируют элементы, образуя более сильную связь между изображением и его описанием. Добавление ARIA role="group" обеспечивает обратную совместимость со старыми веб-браузерами, которые не поддерживают собственную семантику элемента <figure> .
Рекомендации по использованию альтернативного текста
Конечно, включения альтернативного текста недостаточно. Текст также должен быть содержательным. Например, если на вашем изображении изображена стая божьих коровок, жующих листья вашего призового куста роз, но в альтернативном тексте написано «жуки», передаст ли это полное послание и смысл изображения? Точно нет.
Альтернативные описания должны охватывать как можно больше актуальной визуальной информации и быть краткими. Хотя ограничений на количество символов, которые может прочитать программа чтения с экрана, нет, обычно рекомендуется ограничивать альтернативный текст 150 символами или меньше, чтобы читатель не утомлялся. Если вам необходимо добавить к изображению дополнительный контекст, вы можете использовать один из сложных шаблонов изображения, добавить текст подписи или дополнительно описать изображение в основной копии.
Некоторые дополнительные рекомендации по использованию альтернативного текста включают в себя:
- Не используйте в описании такие слова, как «изображение» или «фото», поскольку программа чтения с экрана определит эти типы файлов за вас.
- Называя изображения, будьте максимально последовательны и точны. Имена изображений являются запасным вариантом, когда альтернативный текст отсутствует или игнорируется.
- Избегайте использования символов, отличных от букв (например, #, 9 и &), и используйте тире между словами, а не подчеркивания в названиях изображений или альтернативном тексте.
- По возможности используйте правильную пунктуацию. Без него описания изображений будут звучать как одно длинное, нескончаемое предложение.
- Пишите альтернативный текст как человек, а не робот. Наполнение ключевыми словами никому не приносит пользы: люди, использующие программы чтения с экрана, будут раздражаться, а алгоритмы поисковых систем будут вас наказывать.
Проверьте свое понимание
Проверьте свои знания ARIA и HTML
Как сделать сложные изображения доступными?
aria-describedby .