Дизайн — статьи о сайтах
Человек с нарушением зрения открывает сайт кафе, чтобы узнать часы работы и посмотреть меню. Программа экранного доступа вместо фотографий читает «IMG_4521.jpg» или просто «изображение». Нужную информацию он не получает. Исправить это можно текстовыми подписями к картинкам, то есть атрибутом alt, и несколькими решениями в структуре страниц.
Что делает alt и что происходит без него
Alt — текстовая замена изображения в коде страницы. Экранные дикторы (например, NVDA и VoiceOver) зачитывают её вместо картинки. Её же видит гость, у которого фото не загрузилось из-за слабого мобильного интернета. Главное правило: подпись должна передавать задачу картинки на странице, а не перечислять все детали. Если атрибута нет вовсе, многие программы читают имя файла, а это шум.
Как описывать фото блюд и интерьера
Описывайте то, что помогает выбрать или представить место: название блюда и заметную особенность.
- Плохо:
alt='фото1',alt='вкусный завтрак'или набор слов «кафе центр завтраки кофе десерты». Такая подпись ничего не сообщает и мешает слушать. - Хорошо:
alt='Сырники со сметаной и малиновым вареньем на белой тарелке'.
Если название блюда уже написано рядом видимым текстом, не заставляйте диктор читать его дважды. Сделайте подпись короткой или пустой (об этом ниже). Для фото зала подойдёт «Зал у окна: столы на двоих и барная стойка». Всё, что гостю нужно знать о доступности помещения, например про вход или расположение столов, пишите обычным текстом на странице, и только если это соответствует действительности. Картинка с такой информацией не заменит.
Меню и афиши картинкой: почему это главная ошибка
Меню в виде JPG или сканированного PDF экранный диктор не прочитает, а на телефоне его трудно увеличить. Основное меню лучше сделать текстом на странице: разделы — заголовками, позиции — списком, цену — рядом с названием. Состав и пометки о добавках, если вы их указываете, тоже должны быть текстом. Красивый файл для печати можно оставить как дополнительную ссылку.
То же с афишами и баннерами акций. Если на картинке написано «Бизнес-ланч по будням с 12:00 до 16:00», эта фраза должна быть и в тексте страницы. Длинный alt для таких случаев не нужен: вынесите условия в абзац рядом с картинкой, а в alt оставьте краткое «Афиша бизнес-ланча».
Когда alt должен быть пустым и как подписывать иконки
Декоративные картинки (фоновые узоры, разделители, завитки возле заголовка) получают пустой атрибут: alt=''. Диктор их пропускает. Удалять атрибут целиком нельзя, иначе начнётся чтение имени файла.
- Логотип в шапке, ведущий на главную:
alt='Кафе «Пример» — на главную'. - Иконка телефона или соцсети без видимого текста: подпись описывает действие, например «Позвонить в кафе» или «Страница кафе во ВКонтакте».
- Иконка рядом с текстом («Wi-Fi для гостей»): пустой alt, смысл уже в тексте.
- Схема проезда картинкой:
alt='Схема проезда: вход со двора, вторая арка от улицы', а адрес и ориентиры продублированы текстом.
Условный пример: блок «Завтраки» на странице меню
Вот фрагмент для вымышленного кафе «Пример». Фото блюда подписано, название и цена остались в тексте, декоративный элемент скрыт от диктора.
<h2>Завтраки</h2>
<img src='syrniki.jpg' alt='Сырники со сметаной и малиновым вареньем'>
<h3>Сырники</h3>
<p>3 штуки, сметана, варенье — 290 ₽</p>
<img src='divider.svg' alt=''>Цена в примере условная. Если рядом с фото стоит заголовок «Сырники», подпись можно сократить до «Сырники на тарелке» или оставить пустой, главное — не получить одинаковое чтение подряд.
Проверочный список перед публикацией
- У каждой картинки есть атрибут alt, пусть даже пустой.
- В подписях нет имён файлов, слов «фото», «картинка» и перечисления ключевых слов.
- Меню, часы работы, адрес и условия акций есть текстом, а не только на изображении.
- Декоративные элементы имеют пустой alt.
- Иконки-ссылки подписаны по действию, а не по внешнему виду.
- Подпись не повторяет видимый текст рядом.
- Одна подпись не длиннее одной-двух коротких фраз.
Проверить результат просто: включите экранный диктор на телефоне или в NVDA и пройдите страницу меню без взгляда на экран. Если вы поняли, что в кафе предлагают и как его найти, подписи работают.
