Дизайн — статьи о сайтах
Сайт парикмахерской обычно небольшой: услуги, цены, мастера, примеры работ и запись. Но именно в этих блоках часто возникают проблемы: светлый текст на фотографии, прайс в виде картинки, десяток одинаковых кнопок «Подробнее». Доступность текста и ссылок означает, что страницу можно прочитать и пользоваться ею при плохом зрении, на ярком солнце, с клавиатуры или с программой экранного чтения. Базовую проверку можно сделать самостоятельно за один вечер.
Что именно проверяем
Для текста важны четыре вещи: достаточный контраст с фоном, читаемый размер, возможность увеличить масштаб без поломки вёрстки и то, что информация набрана текстом, а не нарисована. Для ссылок и кнопок: понятно ли по подписи, куда они ведут, видно ли их среди обычного текста, можно ли дойти до них клавишей Tab и видно ли, где сейчас находится фокус. Ориентир для проверки — международные рекомендации WCAG 2.1, уровень AA. Например, для обычного текста они задают контрастность не ниже 4,5 к 1.
Пример: блок услуг, который выглядит красиво, но работает плохо
Представим условный фрагмент страницы «Стрижки». Фон — фотография салона, поверх неё светло-серый текст на светлом участке снимка. Цены размещены одной картинкой «Прайс.jpg», а под каждой услугой стоит ссылка «Подробнее». Код такого блока может выглядеть так:
<a href='/zhenskaya-strizhka'>Подробнее</a>
<a href='/okrashivanie'>Подробнее</a>
<div class='btn' onclick='openBooking()'>Записаться</div>Что здесь не так. Прайс в картинке нельзя увеличить без потери качества, его не прочитает экранный диктор, а на телефоне цифры мелкие. Две ссылки «Подробнее» звучат одинаково, и из списка ссылок не понять, какая к чему относится. «Записаться» сделано блоком с обработчиком клика: до него не добраться клавишей Tab. Исправленный вариант:
<a href='/zhenskaya-strizhka'>Женская стрижка: что входит и сколько длится</a>
<button type='button' onclick='openBooking()'>Записаться на стрижку</button>Цены при этом лучше вывести обычной таблицей или списком: «Женская стрижка — от … ₽» с актуальными для вас значениями.
Как проверить контраст и размер текста
- Откройте сайт на телефоне на улице или уменьшите яркость экрана до половины. Если подписи на баннере приходится угадывать, контраст недостаточный.
- Проверьте пары цветов в бесплатных калькуляторах контраста: введите цвет текста и фона. Для текста на фотографии берите самый светлый или самый тёмный участок под буквами.
- Увеличьте масштаб страницы в браузере до 200 %. Текст не должен налезать на кнопки, а меню — пропадать.
- Посмотрите на размер основного текста: на телефоне он не должен заставлять щуриться. Серые подписи мелким шрифтом под ценами — частая проблема.
Если фото нужно оставить, разработчик может добавить под текст полупрозрачную подложку или вынести заголовок на однотонный фон.
Как проверить ссылки с клавиатуры и голосом
Отложите мышь и нажимайте Tab. Фокус должен переходить по порядку: меню, услуги, запись, контакты. На каждом элементе должна быть заметная рамка или подсветка. Enter должен открывать ссылку, а запись — запускать форму. Проверьте, не «застревает» ли фокус во всплывающем окне записи и закрывается ли оно клавишей Esc.
Затем включите программу экранного чтения: VoiceOver на iPhone и Mac, TalkBack на Android или бесплатный NVDA на Windows. Попросите прочитать список ссылок. Если вы слышите «Подробнее, подробнее, нажмите здесь, ссылка», подписи нужно переписать. Отдельно проверьте телефон и мессенджеры: ссылка с иконкой без текста должна иметь название, например «Позвонить в салон» или «Написать в Telegram».
Проверочный список для владельца
- Цены, адрес, часы работы и условия записи набраны текстом, а не только картинкой.
- Текст на фото и кнопках читается при низкой яркости экрана.
- Ссылки отличаются от обычного текста не только цветом, например подчёркиванием.
- Нет повторяющихся подписей «Подробнее» и «Здесь»; из подписи ясно, куда ведёт ссылка.
- К «Записаться», телефону и карте можно перейти клавишей Tab, фокус виден.
- При увеличении до 200 % ничего не перекрывается.
- У иконок соцсетей есть текстовые названия.
- Виджет онлайн-записи проверен теми же способами, а не только основной сайт.
Что передать разработчику
Составьте короткую задачу: перечислите страницы, где нашли проблемы, и приложите скриншоты с пометками. Попросите проверить сайт автоматическими инструментами, например Lighthouse в браузере Chrome или расширением WAVE, и учтите, что они находят лишь часть проблем. Осмысленность подписей и удобство записи без мыши проверяются только вручную. Если запись работает на стороннем виджете, уточните у его поставщика, какие возможности он даёт для настройки текста и клавиатурной навигации. После исправлений повторите проверку по этому же списку.
