Сайт IT-интегратора читают по-разному. Технический директор сравнивает схемы, бухгалтер ищет реквизиты и шаблон договора, сотрудник со слабым зрением увеличивает страницу, а кто-то работает только с клавиатуры. Если текст плохо читается, а ссылки непонятны без контекста, обращение теряется на ровном месте. Ниже описан порядок проверки, который можно выполнить силами команды и подрядчика.
Что в сайте интегратора чаще всего мешает чтению и навигации
Здесь много плотного текста: описания решений, этапы внедрения, перечни оборудования и ПО, аббревиатуры (СХД, ЦОД, СКУД, ИБ). Рядом стоят карточки услуг с одинаковыми кнопками «Подробнее», таблицы совместимости, PDF с опросными листами и схемами. Именно эти элементы чаще всего ломают чтение с экранным диктором, увеличение масштаба и переход по страницам клавишей Tab.
Условный пример: карточка услуги и её недочёты
Возьмём вымышленный фрагмент страницы «Построение сетевой инфраструктуры»:
<div class='card'>
<h3>Модернизация ЛВС</h3>
<p style='color:#999'>Аудит, проектирование, монтаж, настройка.</p>
<a href='/lan'>Подробнее</a>
<a href='/opros.pdf'>Скачать</a>
</div>Что здесь не так. Светло-серый #999999 на белом фоне даёт контраст около 2,9:1, тогда как для обычного текста в WCAG ориентир — не ниже 4,5:1. Ссылки «Подробнее» и «Скачать» повторяются в каждой карточке, и в списке ссылок диктор прочитает их одинаково. Не сказано, что вторая ссылка ведёт на PDF и какой именно документ в нём лежит.
Исправление простое: тёмно-серый цвет вроде #595959, тексты ссылок «Подробнее: модернизация ЛВС» и «Скачать опросный лист (PDF)». Видимый текст при этом совпадает с тем, что услышит пользователь диктора.
Как проверить текст на странице
- Контраст. Пипетка в инструментах разработчика браузера показывает коэффициент. Проверьте основной текст, подписи к полям формы, серые примечания, текст поверх фото и баннеров, состояния при наведении. Для крупного текста достаточно 3:1.
- Масштаб. Откройте страницу в окне шириной около 1280 px и увеличьте до 200%, затем до 400%. Абзацы не должны требовать горизонтальной прокрутки, кнопки и меню не должны перекрывать текст. Широкую таблицу допустимо прокручивать отдельно.
- Заголовки. На странице один h1, дальше h2 и h3 по порядку, без пропусков ради размера шрифта. Список заголовков можно посмотреть в расширении для браузера или в экранном дикторе.
- Аббревиатуры. При первом упоминании нужна расшифровка, особенно в описаниях услуг для руководителей нетехнических отделов.
- Смысл не только цветом. Фразы вроде «поля, отмеченные красным, обязательны» дополните звёздочкой или словом.
- Язык. У страницы задан lang='ru', а английские названия продуктов не образуют длинных кусков без пояснения.
