Дизайн — статьи о сайтах
На сайте поставщика оборудования основную работу делают таблицы характеристик, паспорта в PDF и десятки однотипных ссылок в каталоге. Если они плохо читаются или недоступны с клавиатуры, часть посетителей не найдёт нужную модель и не отправит запрос. Базовую проверку можно сделать за пару часов без специальной техники.
Какой фрагмент страницы взять для проверки
Возьмите типовую карточку, например «Насос центробежный консольный». В ней есть заголовок, фото, таблица (подача, напор, мощность, напряжение) и ссылки «Подробнее», «Скачать PDF», «Запросить цену». В списке каталога из двадцати позиций эти подписи повторяются. Проверьте четыре шаблона: список каталога, карточку товара, раздел документов и форму запроса. Остальные страницы обычно построены по тем же правилам.
Читается ли текст: контраст, размер, текст в картинках
Светло-серый текст на белом или сером фоне в таблицах встречается часто. Руководство WCAG 2.0 на уровне AA требует контраст не ниже 4,5:1 для обычного текста и 3:1 для крупного. Значение можно измерить бесплатной программой Colour Contrast Analyser: выберите цвет текста и фона пипеткой.
Затем увеличьте масштаб страницы в браузере до 200%. Текст не должен обрезаться или налезать на соседние блоки, а широкая таблица должна прокручиваться. Отдельно проверьте характеристики, размещённые картинкой, например скан шильдика или таблицу-изображение. Их нельзя выделить, скопировать или прочитать программой экранного доступа. Продублируйте данные текстом в HTML-таблице, а PDF оставьте как дополнение.
Таблицы характеристик
- Заголовки столбцов и строк оформлены как ячейки-заголовки (th), а не просто выделены жирным.
- У таблицы есть название, например «Технические характеристики К 80-50-200».
- Единицы измерения указаны рядом со значением или в заголовке: «Напор, м», «Мощность, кВт».
- Таблица не используется для вёрстки страницы.
Так программа чтения экрана произнесёт «Напор, 50», а не просто «50».
Ссылки: понятны ли они без окружающего текста
Пользователи программ экранного доступа часто просматривают список всех ссылок страницы. Двадцать подряд «Подробнее» им ничего не говорят. Сравните:
- «Подробнее» → «Подробнее о насосе К 80-50-200»;
- «Скачать PDF» → «Скачать паспорт насоса К 80-50-200 (PDF)»;
- «Здесь» → «Прайс-лист на запасные части».
Если ссылка выполнена картинкой, например логотипом производителя, у неё должен быть текстовый атрибут alt с назначением ссылки. Ссылку в тексте нельзя отличать только цветом: нужно подчёркивание или другой признак. Если ссылка открывает файл, укажите формат, а лучше и размер.
Проверка клавиатурой и экранным чтением
Уберите мышь и пройдите карточку клавишей Tab. Фокус должен быть виден на каждой ссылке и кнопке и двигаться в логичном порядке. Выпадающее меню каталога и фильтры по параметрам должны открываться без мыши. В форме запроса у каждого поля должна быть подпись (label), а сообщение об ошибке должно быть текстом, а не только красной рамкой.
Затем установите бесплатный NVDA и послушайте страницу пару минут. Обратите внимание на порядок заголовков: один h1 с названием товара, далее h2 и h3 для разделов. Если речь превращается в набор непонятных фраз, проблема обычно в разметке.
Короткий проверочный список
- Контраст текста и фона не ниже 4,5:1, у крупного текста не ниже 3:1.
- При увеличении до 200% ничего не обрезается.
- Характеристики есть в HTML, а не только на картинке или в PDF.
- В таблицах размечены заголовки, указаны единицы измерения.
- Подписи ссылок различаются и называют цель или документ.
- У ссылок-картинок есть alt, у файлов указан формат.
- Всё работает с клавиатуры, фокус виден.
- У полей формы есть подписи, ошибки описаны словами.
Выпишите найденные недочёты по шаблонам и передайте разработчикам. Исправление шаблона карточки обычно улучшает сразу весь каталог.
