Дизайн — статьи о сайтах
На сайте детского сада много картинок: фото групп, афиши утренников, меню в виде скана, схема проезда. Человек, который слушает страницу через программу экранного чтения, не видит изображение. Он услышит только альтернативный текст (атрибут alt), а если его нет, то имя файла вроде «IMG_4025». Ниже о том, как сделать эти описания понятными и не превратить их в формальность.
Кому нужен alt на сайте детского сада
Сайт открывают бабушки и дедушки с плохим зрением, родители, которые слушают страницу в дороге, люди с нарушениями зрения. Альтернативный текст также показывается на месте картинки, если она не загрузилась, например при слабой мобильной связи. Для владельца организации это конкретная рабочая задача: у каждой картинки на сайте должно быть решение, нужно ли её описывать и что именно сказать.
Какие картинки бывают и что с ними делать
- Информативные фото (здание, участок, групповая комната, зал): коротко опишите, что видно и зачем это показано.
- Картинки с текстом (афиша, объявление, расписание, меню): весь важный текст должен быть и на странице обычным текстом. В alt достаточно названия документа.
- Логотип: название организации. Если логотип стоит в ссылке на главную, пишите «Детский сад №… , на главную».
- Декоративные элементы (рамки, облачка, узоры): пустой alt, то есть
alt=''. Тогда программа чтения их пропустит. - Иконки-кнопки (телефон, карта): описывайте действие, а не рисунок: «Позвонить в детский сад».
Пример: фрагмент страницы группы
Допустим, на странице условной группы «Пчёлки» есть фото игровой зоны, скан недельного меню и декоративная картинка с пчёлкой.
<img src='igrovaya.jpg' alt='Игровая зона группы: низкие стеллажи с конструкторами, ковёр и столики для рисования'>
<img src='menu.jpg' alt='Меню на неделю, таблица (полный текст ниже на странице)'>
<img src='pchela.png' alt=''>
Под сканом меню размещается обычная HTML-таблица с блюдами по дням. Тогда информацию получат и пользователи скринридеров, и те, кто просто хочет увеличить шрифт на телефоне. Сам скан можно оставить как дополнительный файл для скачивания.
Чего не стоит писать в описаниях
- Слова «картинка», «фото», «изображение»: программа чтения и так сообщает, что это изображение.
- Общие фразы вроде «наш садик» или «дети». Лучше: «Дети лепят из пластилина за столом, воспитатель рядом».
- Имена и фамилии детей. Подпись к фото на сайте публично видна всем, поэтому достаточно описать действие. Вопросы согласий на публикацию изображений обсудите со своим юристом.
- Перечень ключевых слов в расчёте на поисковые системы. Описание пишется для человека.
- Длинные абзацы. Обычно хватает одного-двух предложений. Если нужны подробности, вынесите их в текст страницы.
Как встроить подписи в работу садика и студии
Чаще всего alt пропадает не из-за сложности, а из-за того, что поле в админке не заполняют. Что можно сделать:
- назначить ответственного за публикации, например делопроизводителя или методиста, и дать ему короткую памятку с примерами;
- попросить студию сделать поле описания обязательным при загрузке фото в галерею, а для декоративных изображений добавить отметку «не требует описания»;
- не загружать афиши и меню только картинкой, а публиковать их и текстом;
- при редизайне оставить в техническом задании пункт о проверке всех шаблонных изображений: логотипа, иконок, баннеров.
Проверочный список перед публикацией страницы
- У каждой смысловой картинки есть alt, который объясняет, что на ней и зачем.
- Декоративные изображения имеют пустой alt.
- Текст с афиш, расписаний и меню продублирован на странице обычным текстом.
- В описаниях нет имён детей и слов «фото», «картинка».
- Кнопки и значки-ссылки описывают действие.
- Описание не длиннее одного-двух предложений.
- Страница прочитана вслух или проверена экранным чтением (например, NVDA для Windows): смысл понятен без картинок.
Такая проверка занимает несколько минут на страницу, зато сайт становится понятнее для всех родителей, независимо от того, как они его читают.
