Что это
Альтернативный текст — это краткое письменное описание, прикреплённое к изображению в коде страницы, которое скринридер объявляет вслух вместо самого изображения, поскольку незрячий или слабовидящий посетитель, использующий его, не может увидеть изображение напрямую. В то время как наше SEO-ориентированное руководство по альт-тексту рассматривает, как этот же атрибут помогает поисковым системам находить изображения, этот угол специально касается того, что альт-текст значит для реального человека, зависящего от него, чтобы получить доступ к той же информации, которую зрячий посетитель получает, просто посмотрев на картинку.
Это различие важно на практике: альт-текст, написанный исключительно для ранжирования в поиске по изображениям, может в итоге быть напичкан ключевыми словами вместо подлинного описания того, что показывает изображение, что плохо служит пользователю скринридера, даже технически удовлетворяя букве требования.
Почему это важно
Для пользователя скринридера изображение без альт-текста либо полностью пропускается (как будто его не существует), либо объявляется как бесполезное имя файла вроде «IMG_4821.jpg» — в любом случае, любая информация, которую это изображение должно было донести до зрячего посетителя, просто теряется. Это становится серьёзным барьером, когда изображение несёт значимый контент: график с данными, диаграмму, объясняющую процесс, фото продукта, показывающее характеристику, не описанную нигде в окружающем тексте.
Это также юридическое требование доступности во многих контекстах, согласно стандартам вроде WCAG (Руководства по доступности веб-контента), которым многие бизнесы обязаны соответствовать — но рассматривать это чисто как галочку соответствия — значит упускать суть, что это решает реальную, повседневную проблему доступа для настоящих посетителей.
Как это исправить
- Для каждого изображения, несущего реальную информацию, напишите альт-текст, описывающий, что оно на самом деле показывает, как будто описываете его кому-то по телефону, кто не может его увидеть.
- Держите описания краткими и конкретными — обычно достаточно предложения или короткой фразы; избегайте повторения информации, уже данной в окружающем тексте.
- Для чисто декоративных изображений, не добавляющих информации (текстуры фона, разделители), используйте пустой
alt="", чтобы скринридер полностью их пропускал, а не объявлял что-то бессмысленное. - Для изображения, которое само является ссылкой (например, логотип, ведущий на главную страницу), напишите альт-текст, описывающий, куда ведёт ссылка, а не только то, как выглядит изображение.
- Протестируйте с бесплатным скринридером (NVDA, VoiceOver), чтобы услышать, как ваши изображения на самом деле объявляются, а не предполагать, что написанный вами текст хорошо звучит вслух.