Аудит фотографий меню и визуального контента ресторана по WCAG 2.2

Почему визуальный контент меню требует отдельного аудита

Сайт ресторана обычно строится вокруг изображений: фотографии блюд на главной странице, баннеры сезонных предложений, сканы или PDF-версии бумажного меню. Эти элементы несут содержательную информацию — название блюда, состав, цену, акцию, — но по умолчанию браузер и ассистивные технологии не могут «прочитать» изображение так, как читают текст. Если фотография не сопровождается корректной текстовой альтернативой или контраст элементов на ней недостаточен, часть посетителей сайта просто не получает эту информацию.

Важно разделять зоны ответственности: аудит визуального контента не затрагивает формы бронирования столика, корзину онлайн-заказа или чат поддержки — там применяются другие критерии WCAG, касающиеся меток полей, идентификации ошибок и работы с клавиатурой. Смешивать эти проверки в одном чек-листе нецелесообразно, потому что методы проверки и типичные ошибки различаются.

Фреймворк «ФОКУС»: пошаговый метод аудита

Для практической работы удобно разложить проверку на пять последовательных шагов, каждый из которых соответствует одной группе критериев WCAG 2.2. Название фреймворка — мнемоника: Фото, Описание, Контраст, Уникальность, Структура.

Ф — Фото и их роль на странице

• Определите, является ли изображение информативным (несёт уникальные сведения: вид блюда, состав, цена на баннере) или чисто декоративным (фоновая текстура, орнамент).
• Для информативных изображений критерий 1.1.1 Нетекстовый контент требует текстовой альтернативы, эквивалентной по смыслу.
• Для декоративных изображений допустима пустая альтернатива, чтобы скринридер не озвучивал бессмысленный текст.

О — Описание (альтернативный текст)

• Проверьте, описывает ли alt-атрибут суть изображения, а не техническую характеристику файла («del-menyu-2024.jpg» — не альтернатива).
• Если фотография блюда сопровождает текстовое описание в меню, альтернативный текст не должен дублировать его дословно, но должен быть логически связан.
• Для баннеров с текстом на изображении (акция, скидка, часы работы) альтернативный текст должен передавать весь смысл сообщения — это прямо связано с критерием 1.4.5 Изображения текста, который рекомендует использовать настоящий текст вместо изображений текста, где это возможно.

К — Контраст

• Для текста, наложенного на фотографию (баннеры, промо-плашки), проверьте коэффициент контрастности между текстом и фоном по критерию 1.4.3 Контраст (минимум).
• Для нетекстовых элементов — иконок навигации по разделам меню, границ карточек блюд, элементов управления галереей — применяется критерий 1.4.11 Контраст нетекстовых элементов.
• Проверка контраста на фотографии сложнее, чем на однотонном фоне: измерения нужно делать в самой сложной по контрасту точке изображения, а не в среднем по кадру.

У — Уникальность информации

• Определите, есть ли на странице текстовый дубль информации из изображения. Если цена и название блюда уже указаны текстом рядом с фото, требования к альтернативному тексту фотографии смягчаются — достаточно краткого описания.
• Если единственный источник информации — это изображение (например, инфографика с аллергенами или PDF-меню без текстового аналога), требования к его доступности возрастают.

С — Структура PDF-меню

• Проверьте, является ли PDF-файл меню текстовым слоем с корректной разметкой (тегами) или это скан-изображение без распознанного текста.
• Скан без текстового слоя недоступен для скринридера полностью и требует либо распознавания текста, либо предоставления HTML-альтернативы того же меню.
• Проверьте порядок чтения тегированного PDF: колонки, таблицы цен и разделы должны читаться в логичной последовательности, а не в порядке визуальной вёрстки.

Что не входит в этот аудит: ограничения метода

Фреймворк «ФОКУС» намеренно ограничен нетекстовым контентом. Он не охватывает:

• формы бронирования столика и виджеты онлайн-заказа — их доступность регулируется отдельными критериями, связанными с метками полей, идентификацией и исправлением ошибок ввода, работой с клавиатуры;
• видео и аудио материалы ресторана (например, видео-презентацию шефа) — для них действуют критерии субтитров и аудиоописания, не рассмотренные здесь;
• общую навигационную структуру сайта и заголовки страниц — это отдельная область аудита структуры контента.

Кроме того, ни автоматический анализатор контраста, ни ручная проверка по отдельности не дают полной гарантии соответствия. Автоматические инструменты надёжно измеряют коэффициенты контрастности, но не способны оценить смысловое качество альтернативного текста или корректность тегирования PDF — это требует ручной экспертной проверки специалистом, знакомым с ассистивными технологиями.

Как измерять и подтверждать соответствие

Ниже — таблица соответствия критериев WCAG 2.2 конкретным элементам меню-контента и типу проверки, которая для них применима.

Практический порядок работы:

1. Составьте перечень всех изображений на странице меню и на промо-страницах: фото блюд, баннеры, иконки, PDF-файлы.
2. Для каждого элемента отметьте, информативный он или декоративный.
3. Прогоните текст на изображениях и общий контраст через автоматический анализатор контрастности.
4. Вручную прочитайте страницу с включённым скринридером, обращая внимание на то, что именно озвучивается для каждого изображения.
5. Откройте PDF-меню в режиме чтения с экрана и проверьте порядок и полноту озвучивания текста.
6. Зафиксируйте расхождения и приоритизируйте исправления по критичности: сначала — элементы, где изображение является единственным источником информации.

Где здесь может быть уместен ChefNet

ChefNet развивает продукты в области ресторанного диджитал-присутствия и операционных инструментов, включая работу с карточками заведений и меню. Если вы рассматриваете использование таких продуктов для публикации фотографий блюд или PDF-меню, уточняйте у поставщика, какие именно функции — например, поддержка альтернативных текстов или структурированная разметка меню — реализованы и доступны на момент внедрения, поскольку функциональность платформ меняется, и часть возможностей может находиться в разработке.

Дополнительные сценарии: edge cases визуального контента меню

Часть реальных ситуаций на сайтах ресторанов не укладывается в базовый алгоритм и требует отдельного внимания при аудите нетекстового контента и контраста.

Адаптивные изображения на разных брейкпоинтах

Если сайт использует адаптивную вёрстку (разные обрезки фото блюда или баннера для мобильной и десктопной версии через srcset/picture), текст на баннере может смещаться относительно фона, а значит коэффициент контраста, проверенный на десктопе, не гарантирует прохождение критерия 1.4.3 на мобильном варианте того же изображения. Аудит должен включать проверку контраста отдельно для каждого используемого варианта изображения, а не только для версии, открытой по умолчанию в браузере аудитора.

Индикаторы, различимые только цветом

Значки «острое блюдо», «вегетарианское», «новинка» иногда кодируются только цветом заливки иконки без подписи или различимой формы. Критерий 1.4.1 Использование цвета требует, чтобы цвет не был единственным способом передачи информации. При аудите нужно проверять каждый такой значок отдельно: если убрать цвет (например, просмотром в режиме серой шкалы), остаётся ли информация различимой по форме, тексту или паттерну.

Встроенный контент сторонних сервисов

Фотографии блюд, подгружаемые через встроенную ленту социальной сети или сторонний виджет отзывов, находятся вне прямого контроля владельца сайта: альтернативный текст и разметка формируются кодом провайдера. В таких случаях аудит фиксирует это как ограничение доступа к исходному коду и отдельно проверяет, что сам факт наличия виджета не создаёт единственный недублированный источник информации о меню — если это так, находка получает повышенный приоритет.

Многостраничные и ландшафтные PDF-меню

Помимо базовой проверки текстового слоя, для многостраничных PDF нужно отдельно проверять порядок чтения между страницами и то, повторяется ли навигационная структура (например, название раздела) при переходе между страницами документа — скринридер может «терять» контекст раздела при длинном меню.

Приоритизация находок и повторная проверка

Поскольку фотографии блюд и промо-баннеры обновляются чаще, чем структура сайта, аудит имеет смысл встроить в повторяющийся цикл, а не проводить разово.

1. Зафиксируйте дату аудита, версию страницы и брейкпоинт, на котором обнаружена проблема.
2. Повторяйте проверку каждый раз при замене сезонных баннеров или обновлении фотобанка блюд, а не только при редизайне сайта.
3. Ведите журнал находок с указанием критерия WCAG 2.2, уровня приоритета и статуса исправления.

Ограничения метода

• Автоматические анализаторы контраста корректно измеряют коэффициент в заданной точке, но не выбирают эту точку самостоятельно на сложном фотографическом фоне — выбор зоны измерения остаётся ручной задачей аудитора.
• Поведение разных программ чтения с экрана и браузеров при озвучивании изображений и PDF может отличаться; вывод о соответствии, сделанный на основе одной комбинации технологий, не переносится автоматически на все остальные.
• Прохождение автоматической проверки доступности PDF-файла не подтверждает корректность логического порядка чтения — это требует ручной проверки с включённым скринридером.
• Аудит по WCAG 2.2 фиксирует соответствие конкретным критериям спецификации W3C и не является юридическим заключением о соответствии какому-либо нормативному акту.

Первичные источники

• W3C: Web Content Accessibility Guidelines 2.2

FAQ

Редакционное раскрытие: ChefNet публикует это руководство и разрабатывает продукты для поиска ресторанов и ресторанных операций. Общие рекомендации отделены от заявлений о продукте. Возможности могут меняться по мере развития пилотных проектов. Опубликовано 2026-08-12.