Дизайн — статьи о сайтах
Для производителя окон сайт — это каталог, калькулятор, запись на замер и страницы с условиями гарантии. Именно здесь текст чаще всего плохо читается, а ссылки невозможно отличить друг от друга. Базовую проверку можно сделать за один-два часа: понадобятся браузер, клавиатура и список страниц, которые ведут к заявке.
С каких страниц начинать проверку
Не нужно проверять всё подряд. Пройдите путь посетителя к заявке: главная, раздел с профильными системами, карточка окна, калькулятор, форма вызова замерщика, «Контакты». Отдельно возьмите страницы с таблицами характеристик и документами: сертификатами, инструкцией по уходу, условиями гарантии. Составьте список из 8–10 адресов и проверяйте именно их.
Контраст и размер текста в каталоге и таблицах
Типичные проблемы: светло-серая подпись к цене на белом фоне, белый текст поверх фотографии интерьера в баннере, мелкие названия параметров в таблице. По рекомендациям WCAG 2.1 обычный текст должен иметь контраст с фоном не менее 4,5:1, а крупный (от 24 px либо от 18,66 px жирным) — не менее 3:1. Цвета текста и фона можно посмотреть в инструментах разработчика браузера и ввести в любой калькулятор контраста.
Затем увеличьте масштаб страницы до 200% и откройте сайт на телефоне. Смотрите, не обрезается ли текст, не наезжают ли кнопки друг на друга, не пропадают ли столбцы таблицы сравнения профилей. Важные сведения не должны существовать только на картинке: если фраза «5 камер, стеклопакет 32 мм» вшита в баннер, экранный диктор и переводчик её не прочитают.
Пример: карточка окна в каталоге
Возьмём условную карточку серии «П70». В ней две ссылки с одинаковой подписью, цена набрана светло-серым, а телефон вставлен картинкой. Фрагмент кода до правки:
<a href='/okna/p70'>Подробнее</a>
<a href='/okna/p70/calc'>Подробнее</a>После правки:
<a href='/okna/p70'>Окно П70: характеристики</a>
<a href='/okna/p70/calc'>Рассчитать стоимость окна П70</a>Если вывести на экран только список ссылок страницы, в первом варианте будет десяток одинаковых «Подробнее» без намёка на цель. Во втором каждая ссылка понятна без соседнего текста. Телефон лучше оформить текстом со ссылкой вида tel: — его можно прочитать диктором, скопировать и набрать одним нажатием.
Как понять, что ссылки говорят сами за себя
- Текст ссылки описывает, куда она ведёт или что произойдёт: не «Здесь» и «Далее», а «Условия гарантии на окна».
- Разные адреса не скрываются за одинаковыми подписями.
- Для файлов указан формат: «Сертификат соответствия, PDF».
- Ссылку в тексте можно отличить не только цветом: подчёркивание или другой заметный признак.
- Переход на другую страницу — это ссылка, а действие на месте («Рассчитать», «Отправить заявку») — кнопка.
Проверка с клавиатуры и экранным диктором
Уберите мышь и пройдите путь к заявке клавишами Tab, Shift+Tab, Enter и Esc. Заметен ли рамкой или подсветкой текущий элемент? Логичен ли порядок: меню, каталог, форма, а не прыжки по странице? Можно ли в калькуляторе выбрать тип открывания створки и размеры без мыши? Закрывается ли окно «Заказать звонок» по Esc, и возвращается ли фокус на прежнее место?
Затем включите бесплатный экранный диктор NVDA для Windows или встроенный диктор телефона и прослушайте главную страницу и форму замера. У каждого поля должна быть постоянная подпись, а не только серая подсказка внутри поля, которая исчезает при вводе. Сообщение об ошибке должно быть текстом рядом с полем, а не только красной рамкой.
Короткий проверочный список
- Контраст основного текста, цен и подписей не ниже 4,5:1.
- При масштабе 200% ничего не обрезается и не перекрывается.
- Характеристики окон набраны текстом или таблицей, а не картинкой.
- В списке ссылок страницы нет повторяющихся «Подробнее» и «Здесь».
- Ссылки на документы указывают формат файла.
- Телефон и почта — текстовые ссылки.
- Весь путь до заявки проходится клавиатурой, фокус виден.
- У полей формы есть подписи, ошибки описаны словами.
