Дизайн — статьи о сайтах
Сайт салона красоты почти целиком состоит из картинок: примеры работ, портреты мастеров, интерьер, иногда прайс в виде скана. Человек, который пользуется программой экранного чтения, или тот, у кого картинки не загрузились из-за слабого соединения, получает вместо них пустоту или имя файла. Ниже разберём, как подписывать изображения так, чтобы страница сохраняла смысл.
Что услышит посетитель, если подпись не задана
Программы экранного чтения, например JAWS, NVDA или VoiceOver, зачитывают атрибут alt у тега img. Если его нет, многие читалки произносят имя файла: «IMG underscore четыре пять восемь два точка jpg». Из такой фразы не понять, что на фото. Страница «Окрашивание» превращается в набор бессмысленных звуков.
Alt нужен и в обычных ситуациях: когда картинка не загрузилась, когда в браузере отключена графика, когда страницу открывают на медленном мобильном соединении. В этих случаях вместо фото показывается ваш текст.
Какие изображения бывают на сайте салона и что писать для каждого
- Фото работ. Опишите то, что важно клиенту: «Короткая стрижка боб с удлинённой чёлкой, вид сбоку». Для окрашивания назовите технику и цвет, для маникюра — форму и покрытие.
- Портреты мастеров. Достаточно имени и должности: «Анна Сергеева, мастер-колорист». Выражение лица и одежду описывать не нужно.
- Интерьер. Одна фраза о том, что показано: «Зал для стрижек с четырьмя рабочими местами и широкими окнами». Если рядом есть информация о доступности входа, фото не заменит её текстом.
- Логотип. В alt пишите название салона. Если логотип служит ссылкой на главную, добавьте действие: «Салон «Ирис», на главную».
- Иконки-кнопки (телефон, карта, запись). Alt должен говорить о действии: «Записаться онлайн», а не «Иконка календаря».
- Декоративные элементы: фоновые узоры, разделители, цветочки в углу. Для них задайте пустой alt (alt=""), и читалка пропустит их.
Условный пример: страница «Окрашивание волос»
Представим фрагмент страницы с галереей и подписью. Салон и данные придуманы для иллюстрации.
<h2>Балаяж</h2>
<img src="balayage-01.jpg"
alt="Длинные волосы: плавный переход от тёмно-русых корней к светло-бежевым концам, вид со спины">
<p>Балаяж на длинных волосах. Время работы зависит от исходного цвета, мастер назовёт его на консультации.</p>
<a href="/booking/">
<img src="icon-calendar.png" alt="Записаться на окрашивание">
</a>
<img src="flower-divider.png" alt="">Фото получило описание, которое можно представить мысленно. Иконка внутри ссылки названа по действию. Декоративный разделитель не мешает слушателю. Если подпись под фото в тексте уже подробно описывает результат, alt можно сократить до одной строки, чтобы не заставлять человека слушать одно и то же дважды.
Чего лучше не делать в alt-текстах
Не начинайте с «Фотография» или «Картинка»: читалка и так сообщает, что это изображение. Не перечисляйте запросы вроде «стрижка москва недорого салон красоты» — такой текст бесполезен для слушателя и выглядит как набор слов. Не копируйте одну и ту же фразу на двадцать фото: человек не отличит один пример от другого. Не пишите слишком длинно: обычно хватает одной-двух коротких фраз. Если нужно рассказать больше, вынесите это в обычный текст рядом с фото.
Прайс и расписание в виде картинки
Частая ситуация: прайс отсканирован или выложен как изображение. Для читалки это единый блок без содержимого, а длинный alt с перечнем услуг и цен неудобен и быстро устаревает. Надёжное решение — разместить прайс обычной HTML-таблицей или списком. Тогда его можно читать построчно, увеличивать шрифт, копировать и обновлять без графического редактора. Если картинку пока оставляете, продублируйте её содержимое текстом на той же странице.
То же относится к акциям и баннерам с надписями: текст, вшитый в картинку, должен быть повторён в alt или, лучше, в тексте страницы.
Проверочный список для владельца сайта
- У каждого значимого изображения есть alt, который описывает содержание или действие.
- У декоративных картинок alt пустой, а не отсутствует.
- Иконки в ссылках и кнопках названы по действию.
- Подписи к фото работ различаются и называют технику, длину, цвет или форму.
- Прайс, адрес и часы работы доступны текстом, а не только картинкой.
- Отключите в браузере показ изображений и пройдите по сайту: понятно ли, что где находится?
- Прослушайте одну-две страницы бесплатной читалкой, например NVDA, и отметьте, где слышите имена файлов.
Попросите разработчика или контент-менеджера пройтись по этому списку для главной страницы, услуг и контактов. Для небольшого сайта на это обычно хватает одного рабочего вечера, а правила пригодятся при добавлении каждого нового фото.
