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