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

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

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

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

  1. Определенное — когда в атрибуте имеется описательный текст, например, alt="A dog" . В этом случае, скринридер будет читать предоставленный текст, когда пользователь сталкивается с изображением и, как правило, передает контекст этого изображения.
  2. Пустое — когда атрибут есть, но оставлен пустым, то есть alt="" . В этом случае скринридер пропустит изображение, как будто его не существует.
  3. Невалидное (плохая практика) — когда атрибут полностью пропущен. Тогда вместо alt скринридер будет читать значение атрибута src . Это бесполезно для пользователя и поэтому не рекомендуется оставлять изображения в таком состоянии.

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

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

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

1. Текст в виде изображения

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

Читайте также:  Искать номер мобильного телефона

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

2. Информативные изображения

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Программа для обрезки музыкальных файлов

5. Комплексные изображения

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

Краткое описание делается в атрибуте alt . Полное описание может быть задано в каком-либо другом элементе, который будет привязан к изображению с помощью атрибутов longdesc / aria-labelledby или с помощью тегов и .

Вот образец задания краткого и полного описаний с помощью элементов и :

С той же целью мы можем использовать и атрибут longdesc :

Такого же эффекта можно добиться, используя вместо longdesc атрибут aria-labelledby , который работает так же.

6. Группы изображений

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

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

7. Карты изображений

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

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

Где и как использовать атрибут alt?

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

  1. Является ли изображение текстом? Если да, тот же текст надо повторить и в атрибуте. Например, alt="Same text as in image" .
  2. Используется ли изображение в чисто декоративных и оформительских целях? Если да, то оставьте атрибут пустым, так он будет проигнорирован скринридерами, например, alt="" .
  3. Представляет ли изображение действие, которое может совершить пользователь? Если так, то альтернативный текст должен описывать действие, производимое при взаимодействии с элементом, например, alt="Add to Cart" .
  4. Является ли изображение чисто информативным? В этом случае альтернативный текст должен содержать ту же информацию, что и изображение, например, alt="Location" .
  5. Наконец, изображение содержит какую-либо информацию, не представленную на странице в текстовом виде? Если да, то эта информация должна быть добавлена в альтернативный текст, иначе, оставьте атрибут alt пустым и изображение будет проигнорировано скринридерами.
Читайте также:  Домкрат t max отзывы

Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании (рис. 10.3). Затем зарезервированное пустое поле заменяется картинкой (рис. 10.4).

Рис. 10.3. Альтернативный текст до загрузки изображения

Рис. 10.4. Веб-страница после загрузки изображения

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

Для создания альтернативного текста используется атрибут alt тега , как показано в примере 10.2.

Пример 10.2. Добавление альтернативного текста

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

Не все браузеры отображают альтернативный текст в виде всплывающей подсказки. Поэтому для ее создания используйте атрибут title (пример 10.3).

Пример 10.3. Всплывающая подсказка

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

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

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

Альтернативный текст изображения задаётся с помощью атрибута alt . Пример: