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