Текстовые альтернативы изображениям

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

Элис Боксхолл
Alice Boxhall
X
Дэйв Гаш
Dave Gash
Меггин Кирни
Meggin Kearney

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

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500>.<jpg">;
/article

Исследование показало, что 9 из 10 кошек тихо оценивают своих хозяев, пока те спят

кот

На странице у нас есть фотография кошки, иллюстрирующая статью о хорошо известном осуждающем поведении кошек. Экранный диктор объявит это изображение, используя его буквальное имя, "/160204193356-01-cat-500.jpg" . Это точно, но совсем не полезно.

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

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly >off into space"

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

изображение с улучшенным альтернативным текстом

Пара комментариев по поводу alt :

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

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

Рассмотрим изображение логотипа в шапке страницы, как показано выше. Мы можем довольно точно описать изображение как «Логотип Funion».

<img class="logo" src="logo.jpg" a>lt="The Funion logo"

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

Но представьте себе пользователя скринридера, который хочет найти логотип masthead на странице; присвоение ему alt-значения «home» на самом деле создает более запутанный опыт. И зрячий пользователь сталкивается с той же проблемой — выяснить, что происходит при нажатии на логотип сайта — как и пользователь скринридера.

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

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

<img src="magnifying-glass.jpg&qu>ot; alt=""

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