Дизайн — статьи о сайтах
На сайте мастерской фотографии работают на доверие: они показывают помещение, устройства, процесс ремонта. Но часть посетителей их не видит. Это человек с программой экранного чтения, владелец телефона с отключёнными картинками ради экономии трафика, пользователь старого браузера. Вместо снимка они получают только текст атрибута alt. Разберём, что в нём писать на сайте сервисного центра.
Какие изображения на сайте мастерской нужно описывать
Начните с инвентаризации: выпишите картинки ключевых страниц и определите роль каждой.
- фото неисправностей и результата ремонта (трещина на экране, следы окисления на плате) несут информацию;
- снимки сотрудников и рабочего места чаще всего лишь сопровождают текст;
- картинки с текстом: прайс-лист, схема проезда, баннер акции;
- картинки-ссылки: логотип, значок телефона, кнопка «Заказать звонок»;
- сертификаты и дипломы.
Как отличить информативное фото от декоративного
Задайте вопрос: что потеряет посетитель, если картинку убрать? Если ничего, потому что то же самое сказано в тексте рядом, оставьте пустое значение alt. Сам атрибут при этом должен быть. Без него некоторые программы зачитывают имя файла вроде IMG_0231.jpg, и это только мешает. Если же без картинки теряется смысл, например она показывает характер поломки, опишите то, что важно для понимания страницы.
Пример: страница «Замена экрана ноутбука»
Условный фрагмент страницы и подписи для его изображений:
- Фото ноутбука с разбитым экраном. Слабый вариант: «ремонт» или «IMG_0231». Лучше: «Ноутбук с экраном, расколотым по диагонали от нижнего правого угла».
- Фото мастера за заменой матрицы рядом с абзацем, где те же шаги описаны словами. Здесь достаточно пустого alt. Если абзаца нет, напишите: «Мастер отсоединяет шлейф матрицы».
- Скан прайс-листа. В alt не уместить таблицу, поэтому лучше сделать прайс обычной HTML-таблицей. Если оставляете скан, добавьте рядом ссылку на текстовую версию.
- Значок телефона со ссылкой. alt описывает действие: «Позвонить в мастерскую». Номер при этом лучше написать текстом рядом.
- Логотип в шапке ведёт на главную: «Название мастерской, на главную».
- Фото сертификата. «Сертификат сервисного центра» с названием производителя, только если документ действительно выдан. Важные условия из него продублируйте в тексте страницы.
Что не стоит писать в alt
- Слова «картинка» и «фото»: программа и так сообщает, что это изображение.
- Перечень ключевых слов вроде «ремонт ноутбуков недорого быстро». Для слушающего это шум, а позиций в поиске такой приём не гарантирует. Пишите для человека.
- Длинные описания. Ориентир: одна короткая фраза, около сотни знаков. Всё остальное вынесите в основной текст.
- Подмену alt атрибутом title. Он не заменяет альтернативный текст и не везде читается.
Галереи «до и после» и картинки в CSS
В галерее у каждого снимка должен быть свой, отличающийся от соседних alt: «До: окислившаяся плата, видны зелёные следы у разъёма питания», «После: плата очищена». Если подпись нужна всем посетителям, сделайте её обычным абзацем под фото, а не только подсказкой при наведении.
Картинки, подключённые в CSS как фон, alt иметь не могут. Если на таком баннере написано «Диагностика бесплатно при ремонте», этот же текст должен быть и в HTML страницы.
