Покупатель выбрал кольцо, но не может понять, какой размер отмечен: варианты отличаются только цветом. Другой посетитель заполнил заявку, а до кнопки отправки с клавиатуры не добраться. Такие препятствия проще заметить, если проверять сайт на конкретных задачах: найти характеристики украшения, рассмотреть фотографии, выбрать размер и задать вопрос мастерской.
С чего начать проверку
Просматривать подряд весь сайт не нужно. Возьмите главную страницу, каталог или перечень работ, карточку изделия, статью об уходе, контакты и форму заказа. Добавьте страницу с фильтром, галереей, раскрывающимся блоком или выбором размера. Проверьте их на компьютере и телефоне: одно и то же меню может вести себя по-разному.
Записывайте адрес страницы, своё действие, ожидаемый результат и то, что произошло. Например: «В карточке кольца при нажатии Tab фокус переходит с цены сразу на кнопку заказа; выбор размера недоступен». Разработчику такая запись полезнее, чем пометка «сайт неудобный».
Пройдите страницу без мыши
Клавиша Tab переводит фокус между ссылками, кнопками и полями, Shift+Tab — в обратную сторону. Enter обычно открывает ссылку или нажимает кнопку; пробел может работать с кнопками и флажками, стрелки — с некоторыми элементами выбора. Переходы должны идти в понятном порядке, соответствующем расположению элементов на странице. Следите и за тем, видно ли текущий элемент: тонкая рамка в цвет фона не помогает ориентироваться.
Пройдите путь от карточки украшения до подтверждения отправки заявки. Получается ли открыть и закрыть меню, выбрать размер, перелистнуть фотографии, исправить ошибку в форме? Если всплывающее окно перехватывает фокус, после закрытия он должен возвращаться к понятному месту, а не в начало страницы.
Проверьте, что видно без усилий
Текст, контраст и масштаб
Светло-серые подписи на белом фоне трудно читать даже на хорошем экране. В первую очередь проверьте цену, размер, состав изделия, сроки изготовления и сообщения об ошибках. Для обычного текста ориентир по контрасту — не ниже 4,5:1, для крупного — 3:1. Измерьте его специальным инструментом: оценка на глаз ненадёжна.
Увеличьте страницу в браузере до 200%. Текст не должен налезать на кнопки или уходить за край блока. Затем откройте сайт на узком экране: удобно ли читать описание и заполнять форму без постоянной горизонтальной прокрутки? Проверьте, не прячется ли важное действие, например выбор размера, под неподвижной панелью.
Цвет — не единственная подсказка
Выбранный размер нельзя обозначать одним лишь изменением цвета: добавьте текстовую или другую различимую отметку. Если размера нет, напишите «Нет в наличии», а не просто делайте вариант бледнее. То же относится к форме: сообщение «Укажите адрес электронной почты» рядом с полем полезнее красной рамки без пояснения.
Посмотрите на фотографии глазами человека, который их не видит
Альтернативный текст должен передавать смысл изображения, а не перечислять каждую видимую деталь. В карточке изделия подпись «Серебряное кольцо с овальным синим камнем, вид сбоку» уместна, если этот ракурс помогает рассмотреть оправу. Декоративному узору, который не добавляет сведений, лучше оставить пустой альтернативный текст: иначе программа чтения с экрана озвучит лишнее.
Важные сведения не должны оставаться только на изображении или в его описании. Пробу, размеры, материал вставки и условия заказа размещайте обычным текстом рядом с фотографией, если они подтверждены и используются на странице. Таблицу размеров колец с картинки продублируйте в текстовом или табличном виде. Подписи «картинка 3» и длинное название товара, повторённое у каждого ракурса, тоже не помогают понять, что показано.
Оцените структуру и понятность текста
По заголовкам посетитель быстро переходит к нужному разделу; ими пользуются и программы чтения с экрана. Главный заголовок должен называть содержание страницы, а подзаголовки — последовательно разделять текст. Крупный жирный шрифт сам по себе не делает строку заголовком в структуре страницы.
Называйте ссылки и кнопки по действию или назначению. «Посмотреть размеры колец» понятнее, чем «Подробнее», особенно когда таких кнопок несколько. Ссылка на условия ремонта не должна обещать запись на ремонт. Специальные термины лучше кратко пояснять: человеку важно понять, подходит ли услуга для его украшения, не разыскивая значение незнакомого слова.
Проверьте форму и сообщения после отправки
- У каждого поля есть видимое название: «Имя», «Телефон», «Описание изделия». Подсказка внутри поля не заменяет его: она исчезает, когда человек начинает вводить данные.
- Обязательные поля отмечены текстом. Если важен формат ввода, объясните его заранее, чтобы не приходилось угадывать, какие символы допустимы в номере телефона.
- Ошибки появляются рядом с соответствующими полями и объясняют, как их исправить. Введённые данные после ошибки не пропадают без необходимости.
- После отправки появляется понятное подтверждение. Если заявка не ушла, сообщение не должно выглядеть как уведомление об успехе.
Если к заявке можно прикрепить фотографию украшения, проверьте и загрузку. Доступна ли кнопка выбора файла с клавиатуры? Указаны ли ограничения по формату и размеру до загрузки? Объясняет ли сообщение причину отказа? Не используйте для проверки личные данные и реальные обращения, если на сайте нет безопасного тестового сценария.
Что дают автоматические проверки, а что остаётся человеку
Автоматический анализ помогает найти часть проблем: поля без названий, изображения без альтернативного текста, некоторые ошибки структуры и контраста. Но он не скажет, верно ли описан ракурс кольца, понятна ли ошибка в форме и удобно ли выбирать размер. Считайте его результат списком мест для проверки, а не сертификатом доступности.
Если есть возможность, откройте одну ключевую страницу с программой чтения с экрана и послушайте, как названы кнопки, поля и заголовки. Для уверенной оценки всего сайта нужны более широкое тестирование и участие людей, использующих разные способы взаимодействия. Самостоятельный обзор выявляет заметные барьеры, но не подтверждает соответствие всем требованиям доступности.
Как расставить приоритеты после проверки
Сначала исправляйте то, что не даёт завершить действие: недоступную кнопку заказа, форму с непонятными ошибками, выбор размера, до которого нельзя добраться с клавиатуры. Затем займитесь тем, что мешает понять содержание: плохо различимым текстом, неинформативными подписями, отсутствующими описаниями важных изображений. Косметические недочёты можно отложить, если они не мешают пользоваться страницей.
После исправления повторите тот же путь, на котором нашли ошибку. Если размер кольца нельзя было выбрать с клавиатуры, снова откройте карточку, дойдите до вариантов клавишей Tab, отметьте нужный и проверьте, появился ли он в заявке. Работающая кнопка ещё не означает, что покупатель сможет завершить весь путь.