Дизайн — статьи о сайтах
На сайте производителя главное не слоган, а данные: марка материала, допуски, сроки, телефон отдела продаж, прайс, сертификат. Если посетитель не может прочитать серый шрифт в таблице, не находит нужную ссылку или не может нажать кнопку без мыши, он теряет именно эти сведения. Проверить это можно самостоятельно, без специальных знаний, примерно за час.
Что именно проверяется
Для сайта производства достаточно трёх вопросов. Можно ли прочитать текст при плохом экране, ярком свете или увеличении? Можно ли добраться до каталога, формы запроса и файлов с клавиатуры? Понятно ли по тексту ссылки, куда она ведёт и что скачается? Ориентир для проверки — международные рекомендации WCAG 2.0. Юридической оценки здесь нет, это рабочий инструмент для вашего сайта.
Условный пример: карточка «Лист горячекатаный»
Представим типовую страницу каталога. На ней обычно находятся такие элементы:
- таблица толщин и марок стали светло-серым шрифтом (#999) на белом фоне;
- три одинаковые ссылки «Скачать» и две «Подробнее» в разных блоках;
- телефон отдела продаж, вставленный картинкой без описания;
- сертификат соответствия в виде скана, текст есть только на изображении;
- ссылки в тексте отличаются от обычных слов только оттенком цвета.
Каждый пункт вызывает отдельную проблему, и ниже показано, как её найти и исправить.
Контраст и размер шрифта: проверка за десять минут
По WCAG 2.0 соотношение яркости обычного текста и фона должно быть не ниже 4,5:1, для крупного текста — 3:1. Возьмите бесплатную программу вроде Colour Contrast Analyser, пипеткой выберите цвет текста и фона и посмотрите результат. Светло-серый #999 на белом этот порог не проходит, а таблицы характеристик часто оформляют именно так.
Затем увеличьте масштаб страницы в браузере до 200%. Проверьте, не налезают ли столбцы таблицы друг на друга, не обрезается ли текст в кнопках, не пропадает ли меню. Наконец, распечатайте карточку в чёрно-белом режиме: цех или склад часто получают распечатки, а не экранную версию.
Ссылки: понятны ли они без соседнего текста
Посетитель, который листает ссылки подряд или слушает их список через программу экранного чтения, видит только их текст. Ряд из пяти «Скачать» ему ничего не говорит. Сравните:
- слабо: «Скачать», «Подробнее», «Здесь»;
- лучше: «Прайс-лист на листовой прокат (PDF, 2 МБ)», «Технические условия на лист горячекатаный», «Сертификат соответствия: скан и данные».
Для файлов указывайте формат и примерный размер, чтобы человек с мобильным интернетом на площадке знал, что его ждёт. Ссылки в тексте подчёркивайте: цвет сам по себе заметен не всем. Проверьте также, что ссылка не ведёт на устаревший файл с прошлогодними ценами.
Клавиатура: пройдите сайт без мыши
Уберите мышь и нажимайте клавишу Tab. Фокус должен переходить по ссылкам и кнопкам в логичном порядке: шапка, меню, содержимое, форма. Важно, чтобы текущий элемент был виден: рамка или подсветка. Если разработчик убрал её стилями ради аккуратного вида, ориентироваться невозможно.
Отдельно проверьте выпадающее меню каталога, форму «Запросить коммерческое предложение», галерею фотографий оборудования и всплывающие окна. Форму нужно уметь заполнить и отправить клавишами. У каждого поля должна быть подпись, а не только текст-подсказка внутри поля, который исчезает при вводе.
Сканы, чертежи и таблицы: где прячется важный текст
Если телефон или адрес есть только на картинке, его не прочитает поисковый робот и программа экранного чтения, а копировать его нельзя. Дублируйте такие данные текстом. У информативных изображений нужен короткий альтернативный текст, например «Схема размеров фланца DN100». У декоративных он должен быть пустым.
Скан сертификата сопровождайте обычным текстом: номер, срок действия, кто выдал, на какую продукцию распространяется. Размеры с чертежа тоже выпишите в таблицу. Саму таблицу размечайте как таблицу: с заголовками столбцов и строк, а не набором блоков, которые только выглядят как таблица.
Проверочный список для передачи разработчику
- Основной текст и данные в таблицах имеют контраст не ниже 4,5:1.
- При масштабе 200% ничего не обрезается и не перекрывается.
- Тексты ссылок различаются и описывают цель; у файлов указаны формат и размер.
- Ссылки в тексте не отличаются от остального только цветом.
- Все ссылки, кнопки и поля форм доступны через Tab, фокус виден.
- Телефон, адрес и реквизиты есть текстом, а не только картинкой.
- У содержательных изображений есть описание, у сканов документов есть текстовые данные.
- У таблиц характеристик размечены заголовки.
Отметьте найденные проблемы по страницам и расставьте приоритеты. Сначала исправляйте то, что мешает связаться с вами или получить прайс и характеристики, затем остальное. Такой список — готовое техническое задание для подрядчика, а повторную проверку можно провести после каждого обновления каталога.
