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