Доступность сайта звучит как что-то для госучреждений, но на деле это про обычных клиентов. Бабушка, которая записывает внука на кружок. Мужчина, который заказывает доставку одной рукой, держа ребёнка. Человек на остановке под ярким ереванским солнцем, которому не видно светло-серый текст. Если сайт неудобен этим людям, заявки теряются тихо: никто не напишет, что не смог прочитать кнопку.
Кому мешает недоступный сайт
| Кто | Что мешает |
|---|---|
| Люди старшего возраста | мелкий шрифт, маленькие кнопки, бледный текст |
| Люди со слабым зрением | низкий контраст, текст на фото, нет масштабирования |
| Люди с дальтонизмом | ошибки формы показаны только красным цветом |
| Те, кто на улице | бледные цвета не видны на солнце |
| Пользователи экранного чтения | картинки без описания, кнопки без текста |
| Все с телефона | кнопки, в которые не попасть пальцем |
Шрифты
- Основной текст на телефоне не меньше 16 пикселей.
- Межстрочный интервал около 1.5 от размера шрифта.
- Строка на компьютере не шире 70-80 знаков, иначе глаз теряет начало следующей.
- Не делать важный текст тонким начертанием.
- Не запрещать увеличение страницы на телефоне.
Армянский текст. Не каждый красивый шрифт поддерживает армянский алфавит. Если шрифт его не знает, браузер подставит случайный, и страница развалится по стилю. Для сайтов на ru, en и hy шрифт выбирают сразу с поддержкой всех трёх письменностей. Подробнее о языковых версиях в статье сайт на трёх языках.
Контраст
Самая частая проблема модных сайтов: светло-серый текст на белом или белый текст поверх фотографии. Для обычного текста соотношение контраста должно быть не меньше 4.5 к 1, для крупных заголовков не меньше 3 к 1. Проверить можно бесплатными онлайн-сервисами: вводите два цвета и получаете ответ.
Текст поверх фото читается только с тёмной подложкой или затемнением фото.
Кнопки и ссылки
- Размер области нажатия не меньше 44 на 44 пикселя.
- Между соседними кнопками расстояние, чтобы не нажать не ту.
- Текст кнопки говорит, что произойдёт: «Записаться на пробное», а не «Далее».
- Ссылки в тексте отличаются не только цветом, но и подчёркиванием.
- Кнопки звонка и Telegram видны на телефоне без прокрутки.
Формы
Форма заявки - место, где доступность превращается в деньги.
- Подпись над полем, а не серый текст внутри поля, который исчезает при вводе.
- Ошибка написана словами рядом с полем: «Укажите номер телефона», а не только красная рамка.
- Поле телефона открывает цифровую клавиатуру.
- Не требовать регистрацию, чтобы оставить заявку.
Остальные правила хорошей формы собраны в статье форма заявки на сайте.
Картинки и видео
- У каждой содержательной картинки описание (alt): «Зал для йоги на 12 человек, окна во двор», а не «IMG_2045».
- Важная информация не только на картинке: цена, адрес и расписание текстом.
- У видео со звуком субтитры. Многие смотрят без звука.
- Автоматически проигрываемое видео без звука и с кнопкой паузы.
Навигация
- Один заголовок H1 и логичные H2 и H3: по ним ориентируются программы экранного чтения.
- Сайтом можно пользоваться клавиатурой: Tab переходит по кнопкам, видно, где фокус.
- В коде указан язык страницы, особенно для армянской версии.
- Меню не прячет главное за тремя уровнями вложенности.
Доступность и скорость
Тяжёлый сайт тоже недоступен: у человека со старым телефоном и слабым мобильным интернетом он просто не откроется. Об этом статья скорость сайта и заявки.
Чек-лист на 10 минут
| Что проверить | Как |
|---|---|
| Размер шрифта | Открыть сайт на телефоне и читать без увеличения |
| Контраст | Онлайн-проверка цвета текста и фона |
| Солнце | Выйти с телефоном на улицу днём |
| Кнопки | Нажать каждую большим пальцем одной руки |
| Форма | Отправить с ошибкой и посмотреть, понятно ли что не так |
| Картинки | Посмотреть, есть ли важная информация только на картинке |
| Увеличение | Растянуть страницу двумя пальцами |
| Клавиатура | Пройти страницу клавишей Tab на компьютере |
Доступность и три языка
Для сайтов в Армении есть ещё пара моментов, о которых редко пишут:
- Переключатель языков должен быть заметным и подписан названием языка, а не только флагом. Флаг России для русского языка или флаг США для английского путает людей.
- Длина текста. Армянский и русский тексты часто длиннее английского. Кнопка, на которую влезает «Book now», может обрезать «Записаться онлайн». Дизайн проверяют на всех языках.
- Шрифт. Армянские буквы мельче выглядят в некоторых шрифтах, поэтому на армянской версии иногда стоит немного увеличить размер.
С чего начать, если сайт уже есть
Не нужно переделывать всё сразу. Порядок:
- Увеличить основной шрифт и затемнить серый текст.
- Поправить форму заявки: подписи и понятные ошибки.
- Добавить описания к фото услуг и работ.
- Убрать важные надписи с картинок в текст.
- Проверить, что кнопки не слишком маленькие на телефоне.
Первые три пункта обычно делаются за день и сразу делают сайт удобнее для всех.
Как это делаем мы
В сайтах Kinto базовые правила доступности входят в работу: размеры шрифтов, контраст, подписи к полям, описания картинок, правильные заголовки и поддержка армянского шрифта. Лендинг стоит от $700 за 6 дней, сайт с разделами от $1 800 за 12 дней, полный прайс на странице цены. Если хотите проверить уже работающий сайт, пришлите ссылку в Telegram @kinto_am.