Дизайн — статьи о сайтах
Для ателье фотография — основной способ показать работу: посадку пальто, аккуратный шов, фактуру ткани. Посетитель, который слушает страницу через программу экранного доступа, видит вместо снимка только пропуск. То же происходит, если на медленном мобильном соединении картинки не загрузились или в браузере отключены. Выручает атрибут alt: короткое текстовое описание, которое показывается или зачитывается вместо изображения. Ниже о том, как заполнять его именно на сайте ателье.
Что должно быть в описании фотографии изделия
Подпись «платье» или «наша работа» ничего не сообщает. Хорошее описание отвечает на вопрос, который задал бы человек, если бы смотрел на снимок вместе с вами. Обычно достаточно назвать:
- что за изделие (пальто, брюки, свадебное платье, штора);
- ключевые признаки: крой, длину, застёжку, цвет;
- материал, если он виден или важен для выбора;
- вид работы, если это не пошив: подгонка по фигуре, замена подкладки, ремонт молнии.
Описание не должно оценивать («элегантное», «стильное») и не должно начинаться со слов «картинка» или «фото»: программа и так сообщает, что это изображение. Хватает одного-двух предложений до 100–120 знаков.
Пример фрагмента страницы услуги
Условная страница «Пошив мужского пальто». Фото изделия и подпись под ним:
<figure>
<img src='coat-navy.jpg' width='600' height='800'
alt='Мужское пальто прямого кроя из тёмно-синей шерсти, на одной пуговице, с накладными карманами'>
<figcaption>Пальто из шерсти. Сроки обсуждаются на первой примерке.</figcaption>
</figure>Здесь alt рассказывает, как изделие выглядит, а видимая подпись добавляет то, чего на снимке не видно. Если дословно повторить одно и то же в обоих местах, человек с экранным доступом услышит одну фразу дважды. Если фото иллюстрирует деталь, например шов или петлю, пишите именно про деталь: «Крупный план ручной обмётки петли на пиджаке».
Галереи работ и слайдеры на главной
В галереях легко получить двадцать подписей «работа 1», «работа 2» и так далее. Лучше отличать снимки друг от друга: кроем, тканью, видом работы. Если у галереи есть общий заголовок, например «Свадебные платья», повторять слово «платье» в каждом alt необязательно, но отличия нужны.
Со слайдерами сложнее. Если слайд — это картинка с акцией, её текст нужно продублировать в alt или лучше вывести обычным текстом рядом. Автоматически сменяющиеся слайды неудобны для тех, кто читает медленно или пользуется клавиатурой. Добавьте кнопки паузы и переключения, доступные с клавиатуры.
Какие изображения не нужно описывать
Декоративные элементы вроде орнамента-разделителя, фоновой текстуры ткани или иконки ножниц рядом со словом «Услуги» лишь мешают. Для них пишут пустой атрибут alt='', и программа пропускает картинку. Сам атрибут при этом нужно оставить: без него некоторые программы зачитывают имя файла. Фоны, заданные в CSS, описывать не нужно вовсе, они в разметке не появляются.
Если картинка служит ссылкой или кнопкой, alt должен говорить о действии, а не о внешнем виде: «Записаться на примерку», а не «Кнопка с портновским метром».
Текст на картинках: прайс, адрес, часы работы
Владельцы нередко кладут на сайт отсканированный прайс или баннер с режимом работы. Такой текст нельзя выделить, увеличить без потери чёткости или прочитать программой. Длинный alt его не заменит. Разместите прайс в обычной таблице HTML, а адрес, телефон и часы работы — в текстовом блоке. Баннер, если он нужен, оставьте как дополнение с коротким alt.
Проверочный список перед публикацией страницы
- У каждого изображения есть атрибут alt, даже если он пустой.
- Для фото изделий указаны вид вещи, крой или цвет и, где важно, материал.
- В описаниях нет слов «фото», «картинка» и оценочных эпитетов.
- Подпись под снимком не дублирует alt дословно.
- Декоративные элементы имеют
alt=''. - У картинок-ссылок alt описывает действие или адрес перехода.
- Цены, адрес и режим работы набраны текстом, а не только нарисованы.
- Слайдер можно остановить и переключить с клавиатуры.
- Вы отключили загрузку картинок в браузере и убедились, что страница остаётся понятной.
Последний пункт — самая быстрая проверка. Если без картинок страница по-прежнему объясняет, что вы шьёте и как к вам записаться, описания составлены правильно.
