Дизайн — статьи о сайтах
Гость открывает сайт ресторана с одной целью: узнать, что в меню, когда вы работаете и как добраться. Если эти сведения нельзя прочитать или до них нельзя дойти по ссылке, он уйдёт к конкуренту. Дело не только в людях с нарушениями зрения. Так же бывает с гостем на телефоне под солнцем, с человеком старшего возраста, с тем, у кого медленный мобильный интернет. Проверка занимает около часа и не требует специальных знаний.
Где у сайтов ресторанов чаще всего теряется текст
Типичные ситуации выглядят так:
- меню выложено фотографией или сканом: текст нельзя увеличить без размытия, выделить, найти поиском по странице, а программа экранного чтения его не прочтёт;
- адрес и телефон нарисованы на баннере или встроены во Flash-блок, который не открывается на планшетах и телефонах;
- светло-серый текст лежит на тёмной фотографии зала, и половина слов пропадает;
- часы работы написаны мелким шрифтом в подвале страницы.
Всё это решается на уровне вёрстки и подготовки материалов, а не «дизайна вообще».
Как проверить читаемость текста
Начните с трёх простых действий.
Увеличьте масштаб до 200% (Ctrl и «+» в браузере). Страница не должна разваливаться: текст не наезжает на картинки, цены не обрезаются, не появляется горизонтальная прокрутка для обычного абзаца. Отдельно попробуйте увеличить только шрифт: в Firefox есть режим «Только текст» в меню «Вид».
Оцените контраст. Рекомендации WCAG 2.0 просят соотношение не ниже 4,5 к 1 для обычного текста и 3 к 1 для крупного (от 18 пунктов или 14 жирных). Измерить это можно бесплатной программой Colour Contrast Analyser: возьмите пипеткой цвет текста и цвет фона. Если текст лежит на фотографии, проверяйте самое светлое и самое тёмное место под ним, а надёжнее подложить полупрозрачную плашку.
Отключите картинки в настройках браузера. Всё, что исчезло вместе с ними, а это меню, телефон или адрес, не существует для части посетителей и для поисковых роботов.
Как проверить ссылки
Ссылка доступна, когда её видно, понятно, куда она ведёт, и по ней можно перейти без мыши и без точного попадания пальцем.
Пройдите страницу клавишей Tab, не трогая мышь. Вы должны видеть, где сейчас фокус (рамка или подчёркивание), порядок переходов должен совпадать с порядком чтения, а до кнопки «Забронировать стол» нужно добираться без лишних десятков нажатий. Если фокус не виден, обычно виновата строка со сбросом обводки в стилях.
Затем прочитайте тексты ссылок отдельно от окружения. Фразы «Подробнее», «Здесь», «Жми» ничего не говорят человеку, который слушает список ссылок голосом. «Банкетное меню (PDF)» или «Забронировать стол» говорят всё.
И проверьте, что ссылка отличается не только цветом: подчёркивание или другое оформление помогают тем, кто не различает оттенки.
Условный пример: блок «Контакты и меню»
Представим типичный фрагмент страницы вымышленного ресторана. Было: картинка с надписью «Меню — нажмите здесь», под ней изображение с телефоном и адресом. Что не так: у картинки нет описания, телефон нельзя набрать касанием, а меню открывается в файле, о формате которого гость не предупреждён.
Стало:
<h2>Меню и контакты</h2>
<p><a href='/menu/'>Меню на странице</a> ·
<a href='/menu.pdf'>Меню в PDF (1,2 МБ)</a></p>
<p>Телефон: <a href='tel:+70000000000'>+7 (000) 000-00-00</a></p>
<p>Адрес: ул. Примерная, 1. Ежедневно с 12:00 до 23:00</p>Меню в виде HTML-текста читается на любом экране и увеличивается без потери качества. PDF оставлен как дополнение с указанием формата и размера. Телефон набирается касанием, а адрес и часы работы остались обычным текстом.
Короткий проверочный список
- Меню, цены, адрес, телефон и часы работы набраны текстом, а не картинкой.
- Страница читается при масштабе 200% без наложений.
- Контраст текста и фона не ниже 4,5 к 1 (у крупного текста 3 к 1), в том числе поверх фотографий.
- Все ссылки видно и понятно по тексту, нет «здесь» и «подробнее» без пояснения.
- Фокус клавиатуры виден, Tab проходит по ссылкам в логичном порядке.
- Ссылки и кнопки на телефоне достаточно крупные и не прижаты друг к другу.
- У содержательных картинок есть короткое описание в атрибуте alt, у декоративных он пустой.
- Файлы PDF подписаны форматом и размером.
Что делать с результатами
Запишите найденные проблемы и разделите их на два списка: то, что владелец может исправить в тексте и содержимом (формулировки ссылок, замена картинки меню текстом), и то, что требует правок шаблона (фокус, контраст, размеры кнопок). Второй список удобно передать разработчикам как конкретное задание. Для более глубокой проверки можно прослушать страницу бесплатным экранным чтением NVDA или прогнать её через онлайн-инструмент WAVE, но и без них описанные шаги выявят основную часть проблем.
