Дизайн — статьи о сайтах
Фотографии на сайте аренды помогают выбрать машину: видно кузов, салон, багажник. Человек со скринридером (например, NVDA или VoiceOver) вместо снимка слышит только текст атрибута alt. Если там пусто или написано «img_0432.jpg», часть информации для него потеряна. Ниже — как писать подписи так, чтобы они помогали выбрать автомобиль.
Что должно быть в подписи к фото автомобиля
Подпись заменяет картинку в том месте, где она стоит. Представьте, что вы по телефону описываете снимок человеку, который его не видит. Если рядом уже есть название модели и характеристики, не повторяйте их. Опишите то, чего в тексте нет: тип кузова, цвет, ракурс, заметные особенности. Скринридер зачитывает подпись вслух, поэтому обычно хватает одной короткой фразы. Слова «фото» и «изображение» не нужны: программа сама сообщает, что это картинка.
Пример: карточка автомобиля в каталоге
Возьмём условную карточку в списке предложений:
<article>
<img src="polo.jpg" alt="Серый седан, вид спереди слева">
<h3>Volkswagen Polo</h3>
<p>Механика, 5 мест, кондиционер</p>
<a href="/cars/polo" aria-label="Выбрать Volkswagen Polo">Выбрать</a>
</article>Название модели стоит в заголовке, поэтому в alt не дублируется. Подпись добавляет только кузов, цвет и ракурс. Кнопка «Выбрать» в списке из двадцати карточек звучит одинаково, и пользователь не поймёт, к какой машине она относится. Поэтому в ссылке указана модель.
Галерея: салон, багажник, детали
Главная ошибка галерей — одна и та же подпись у всех снимков или имена файлов вместо текста. Каждому кадру нужна своя фраза о том, что на нём видно:
- «Салон спереди: тканевые сиденья, сенсорный экран мультимедиа»;
- «Багажник с поднятой крышкой, в нём стоят два чемодана»;
- «Задний диван с креплениями для детского кресла».
Выбирайте детали, влияющие на решение об аренде: объём багажника, крепления, порты зарядки, тип коробки передач на снимке панели. Общий вид интерьера без значимых деталей достаточно описать коротко.
Когда подпись не нужна, а когда обязательна
Декоративные элементы вроде фоновых узоров, разделителей и виньеток получают пустой атрибут alt="". Скринридер их пропустит и не станет засорять речь. То же относится к иконкам рядом с текстом: если подле значка есть слово «Кондиционер», значок дублирует его и читать его не нужно.
Если иконка стоит одна, подпись нужна. Значок детского кресла без текста должен получить alt вроде «Детское кресло доступно». Логотип, который служит ссылкой на главную, подписывается назначением: «Название компании, на главную». Так же поступайте с логотипами партнёров, если они ведут на их страницы.
Карты, схемы и текст на баннерах
Для карты пунктов выдачи или схемы проезда на парковку краткий alt не передаёт содержание. Дублируйте главное текстом на странице: адрес, этаж парковки, ориентиры, часы работы. Тогда подпись к схеме может быть короткой, а точные сведения будут в обычном тексте.
Если условия акции или цена написаны прямо на баннере, не прячьте их в картинке. Выносите текст в HTML и оформляйте стилями. Тогда его прочитает скринридер, он масштабируется вместе со страницей, и его не придётся пересказывать в alt.
Проверочный список для страниц сайта
- У каждого информативного фото есть осмысленный alt без имени файла и слова «фото».
- Подписи в галерее различаются и описывают конкретный кадр.
- Название и характеристики из соседнего текста в alt не повторяются.
- Декоративные картинки и дублирующие текст иконки имеют alt="".
- Иконки без текста и картинки-ссылки подписаны по назначению.
- Адреса, условия и цены продублированы или написаны обычным текстом, а не только на изображении.
- Кнопки в карточках отличаются друг от друга для скринридера.
Проверить всё это можно самостоятельно. Откройте каталог с отключёнными картинками и посмотрите, что осталось. Затем пройдите путь от поиска машины до бронирования со скринридером. Требование к текстовым альтернативам есть и в рекомендациях WCAG 2.1 (критерий 1.1.1), на них удобно опираться при составлении технического задания. Если на сайте много карточек, стоит заложить в админке обязательное поле для подписи фото, чтобы менеджеры заполняли его при добавлении автомобиля.
