Клиент выбирает бумажные пакеты и хочет указать тираж, но название поля в форме заменено серой подсказкой. Стоит начать ввод — подсказка исчезает. Другой клиент пытается выбрать плотность бумаги с клавиатуры, но выпадающий список не открывается. Такие проблемы появляются задолго до финальной «полировки» сайта — при проектировании карточки товара и формы заявки.
Доступный сайт позволяет читать информацию и выполнять основные действия с клавиатуры, через скринридер, при увеличенном масштабе, без опоры на цвет или точные движения мышью. Для сайта типографии речь о повседневных задачах заказчика: узнать характеристики печати, сравнить отделку, подготовить файл и запросить расчёт.
Почему доступность закладывают до дизайна и разработки
После запуска поменять цвет кнопки сравнительно просто. Переделать форму с несколькими зависимыми шагами сложнее: придётся менять интерфейс, программную логику и сообщения об ошибках. Если доступность предусмотрена в задании, команда сразу определяет, какая информация нужна заказчику и как он найдёт её без мыши или изображения.
То же относится к образцам печати. По фотографии можно оценить внешний вид тиснения, но нельзя понять, для каких материалов оно подходит и нужно ли учитывать его при подготовке макета. Эти сведения лучше написать рядом с образцом. Тогда их прочитает скринридер, а заказчику не придётся догадываться о технологических ограничениях по снимку.
Какие задачи клиента сделать доступными в первую очередь
Начните с действий, ради которых человек пришёл на сайт. В типографии заказчику обычно нужно:
- найти продукцию и открыть её характеристики;
- разобраться в различиях между цифровой и офсетной печатью, видами бумаги и отделки;
- понять, какие параметры нужны для расчёта, а какие можно уточнить у менеджера;
- прочитать требования к макету и передать файл;
- отправить заявку и получить понятное подтверждение.
Для каждого действия запишите, с чего клиент начинает, чем должен закончить и что может ему помешать. Если стоимость бумажного пакета рассчитывается индивидуально, на странице нужен список исходных данных: размер, тираж, материал, цветность и тип ручек. Не заставляйте выбирать вариант по визуальным карточкам, которые различаются только оттенком рамки.
Требования к страницам до передачи макетов разработчику
Структура и тексты
Заголовки на странице услуги должны помогать двигаться по содержанию: характеристики, варианты печати, подготовка макета, запрос расчёта. Крупный шрифт сам по себе не повод делать текст заголовком: его уровень сообщает вспомогательным технологиям о структуре страницы. Форматы и свойства бумаги удобно сравнивать в таблице с понятными названиями столбцов. Сложные условия стоит пояснить и обычным текстом.
Название кнопки должно говорить, что произойдёт после нажатия. «Запросить расчёт пакетов» понятнее, чем «Отправить», особенно если на странице несколько форм. В инструкции «Оставьте вылеты под обрез 3 мм» полезнее, чем «Подготовьте макет правильно»: ясно, что проверять. Но размер вылетов нужно сверять с конкретным производственным процессом, а не считать единым для всех изделий.
Цвет, масштаб и управление
Проверяйте контраст текста с фоном не только в основном оформлении, но и у ссылок, подсказок, ошибок и неактивных элементов. Цвет не должен передавать смысл в одиночку. Если срочный срок выделен оранжевым, добавьте метку «срочный заказ». Возможность выполнить такой заказ всё равно подтверждают после согласования параметров.
При увеличении масштаба текст должен оставаться читаемым, а при управлении с клавиатуры фокус — переходить между элементами в понятном порядке. Видимый индикатор фокуса помогает понять, какая кнопка или ссылка выбрана. Проверьте особенно внимательно меню, окна с образцами, переключатели материалов и загрузку файла: здесь пользователь часто застревает без мыши.
Изображения продукции и документы
Фотографии образца нужен короткий альтернативный текст с полезной деталью, которой нет в подписи. Если рядом уже написано «пакет из крафт-бумаги», alt-текст может уточнить: «Крафтовый пакет с белым логотипом и бумажными ручками». Декоративную иллюстрацию не нужно озвучивать как ещё один товар. А для сложной схемы развёртки одного короткого описания мало: размеры и линии сгиба следует указать также в тексте или доступном документе.
Если требования к файлам есть только в PDF, проверьте, выделяется ли текст, читается ли он в правильном порядке и распознаются ли заголовки. В скане без текстового слоя трудно искать параметры даже человеку без скринридера. Основные требования — формат, цветовую модель, разрешение изображений, вылеты и способ передачи макета — разумно продублировать на HTML-странице. Окончательные параметры подготовки файла зависят от технологии печати и требований выбранной типографии.
Форма заявки без скрытых препятствий
У каждого поля должна быть постоянная текстовая метка. Подсказка внутри поля годится для примера, но не заменяет название: как только человек начнёт вводить данные, она исчезнет. Обязательные поля отмечайте словами, а не одной звёздочкой или цветом. Если в форме ошибка, укажите, где она возникла и что исправить. «Укажите адрес электронной почты в формате [email protected]» полезнее, чем «Некорректные данные».
Заказчик не всегда знает все параметры заранее. В заявке на пакеты поле «Плотность бумаги» можно оставить необязательным или добавить вариант «Нужна консультация», если материал допускается подобрать после обращения. Допустимые форматы и максимальный размер файла покажите до загрузки. Если файл не прошёл проверку, остальные введённые данные должны сохраниться.
После отправки заявки покажите текстовое подтверждение, что сайт её принял. Не обещайте конкретный срок расчёта до оценки заказа. Простого изменения цвета кнопки недостаточно: человек может его не заметить или не различить.
Как включить проверку в рабочий процесс
Не оставляйте доступность одному разработчику накануне публикации. Разделите задачи по этапам:
- В задании перечислите основные действия клиента, типы контента и способы управления.
- В дизайне покажите состояния фокуса и ошибок, увеличенный текст и элементы с длинными названиями материалов.
- В контенте подготовьте понятные заголовки, подписи полей, описания значимых изображений и текстовые требования к заказу.
- При разработке и приёмке пройдите ключевые сценарии с клавиатуры, проверьте чтение страницы скринридером и работу формы при увеличении масштаба.
Автоматическая проверка обнаружит часть ошибок разметки и контраста, но не скажет, понял ли клиент разницу между матовой ламинацией и выборочным лаком. Это приходится проверять вручную — на страницах и в форме. Если на сайте много функций, сначала пройдите весь путь от карточки востребованной продукции до подтверждения заявки, затем проверьте остальные разделы и документы.
В акт приёмки формы для бумажных пакетов можно включить конкретный сценарий: открыть страницу, клавишей Tab дойти до выбора тиража, указать параметры, прикрепить макет, исправить намеренно пропущенный email и получить текстовое подтверждение. Если пройти этот путь без мыши не удаётся, форму стоит исправить до публикации.