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

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

Alice Boxhall

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 или любого типа подписи тем, что он используется только в том случае, если изображение недоступно.

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

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

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

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

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

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

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

<img src="magnifying-glass.jpg" alt="">

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