Версия сайта для слабовидящих и удобство чтения: кто ей пользуется на самом деле

Тему доступности сайта обычно вспоминают в двух случаях: либо когда сайт делают для учреждения, где это требуется по регламенту, либо никогда. В коммерческом бизнесе кнопку «версия для слабовидящих» ставят как декоративный элемент, часто нерабочий, и забывают о ней навсегда. Между тем удобство чтения — это не про особую версию для особых людей. Это про то, сможет ли ваш обычный посетитель прочитать текст на телефоне в солнечный день, найти телефон компании глазами за две секунды и нажать нужную кнопку пальцем с первого раза. И вот от этого количество обращений зависит очень заметно.

Разберём тему практически: кто на самом деле пользуется удобным чтением, что нужно сделать на сайте и почему это влияет на заявки, а не только на добрые чувства.

Кто на самом деле не может нормально прочитать ваш сайт

Представление, что доступность нужна узкой группе людей с серьёзными нарушениями зрения, сильно занижает картину. Реальный список гораздо шире.

Люди старше сорока пяти. Возрастная дальнозоркость есть практически у всех после определённого возраста. Человек снимает очки, чтобы посмотреть в телефон, и мелкий серый текст для него просто нечитаем. А это, между прочим, аудитория с самой высокой платёжеспособностью: руководители, собственники, снабженцы, люди, принимающие решения о покупке дома, машины, оборудования.

Люди на солнце. Экран телефона на улице в яркий день теряет контраст. Светло-серый текст на белом фоне исчезает полностью. А значительная часть посетителей сайта услуг смотрит его именно на ходу.

Люди в дороге и в движении. В машине, в транспорте, на объекте. Мелкие элементы просто невозможно нажать.

Люди с усталыми глазами. Вечер, конец рабочего дня, восемь часов за монитором. Читать мелкий текст физически неприятно.

Люди с временными проблемами. Разбитые очки, конъюнктивит, недавняя операция, мигрень.

Люди с дальтонизмом. Значимая доля мужчин в той или иной степени плохо различает цвета. Красная кнопка на зелёном фоне для них сливается.

И только потом — люди с серьёзными нарушениями зрения, пользующиеся программами чтения с экрана и сильным увеличением.

Сложите всё это, и окажется, что затруднения с чтением испытывает не пять процентов посетителей, а куда больше. И каждый из них — потенциальное обращение, которое вы теряете просто потому, что он не смог прочитать цену или найти телефон.

Почему кнопка «версия для слабовидящих» — почти всегда пустая формальность

Типовая реализация выглядит так: в углу висит значок глаза, при нажатии сайт превращается в чёрно-жёлтое нечто с огромными буквами, вёрстка разъезжается, картинки пропадают, меню не работает, а формы отправить невозможно. Такой «режим» никто не использует — им пользуются ровно в одном случае: когда проверяют наличие кнопки.

Проблема в подходе. Отдельная версия — это признание того, что основной сайт неудобен, и попытка откупиться. Правильный путь другой: сделать основной сайт таким, чтобы им было удобно пользоваться всем, и добавить несколько настроек поверх, а не отдельный режим.

Что действительно полезно из настроек:

• увеличение размера шрифта в два-три шага, при котором вёрстка не ломается;
• переключение контрастной темы — не кислотно-жёлтой, а просто с более сильным контрастом;
• отключение анимации — для людей, которым движение мешает читать;
• запоминание выбора — чтобы при переходе на другую страницу настройки сохранялись.

Всё остальное — украшательство.

Что сделать на основном сайте

Здесь и лежит основная польза. Перечисленное ниже улучшает сайт для всех без исключения посетителей.

Размер основного текста. Стандартный текст на сайтах часто слишком мелкий — дизайнеру на большом мониторе он кажется нормальным, а посетителю пятидесяти лет с телефона — нет. Основной текст должен быть заметно крупнее, чем принято. Проверка простая: откройте сайт на телефоне, отойдите на вытянутую руку. Читаете? Значит, нормально.

Контраст. Светло-серый текст на белом фоне — модное дизайнерское решение и одновременно главный враг читаемости. Текст должен быть тёмным. Особенно это касается подписей, примечаний, условий, цен — то есть ровно того, что человеку важнее всего прочитать.

Межстрочный интервал. Плотно набитый текст читать тяжело. Полуторный интервал заметно облегчает чтение длинных страниц.

Длина строки. Слишком широкая колонка текста на большом мониторе — глаз теряет строку. Разумная ширина — примерно семьдесят-восемьдесят знаков.

Шрифт. Простой, без вычурности, с чётко различимыми буквами. Тонкие начертания на светлом фоне читаются плохо.

Размер кнопок и ссылок. Кнопка должна нажиматься пальцем без прицеливания. Мелкие ссылки, стоящие вплотную друг к другу, — источник постоянных промахов. Особенно это касается телефона в шапке и кнопок форм.

Не только цветом. Обязательные поля формы, отмеченные только красным цветом, для человека с дальтонизмом неотличимы от остальных. Нужны ещё и подпись, и значок.

Поля форм с подписями. Подпись, исчезающая при вводе, — плохая практика: человек забывает, что он вводит. Подпись должна оставаться над полем.

Понятные сообщения об ошибках. «Ошибка» — бесполезно. «Телефон должен содержать 11 цифр» — полезно.

Подписи к изображениям. Альтернативный текст нужен и программам чтения, и на случай, если картинка не загрузилась. Заодно это помогает поисковым системам понять содержание.

Осмысленный текст ссылок. «Подробнее» и «здесь» ничего не говорят ни человеку, просматривающему страницу глазами, ни программе чтения. «Посмотреть цены на монтаж» — говорит.

Правильная структура заголовков. Заголовки разных уровней должны идти по порядку, а не назначаться по размеру шрифта. Это и логика документа, и то, по чему ориентируются программы чтения.

Работа с клавиатуры. Проверьте: можно ли пройти по сайту клавишей перехода между элементами, видно ли, на каком элементе вы сейчас находитесь, можно ли отправить форму без мыши. Это важно не только для незрячих: люди с травмами рук и просто те, кому так удобнее, тоже существуют.

Никаких ловушек. Всплывающее окно, которое невозможно закрыть; видео, которое запускается со звуком; баннер, перекрывающий половину экрана на мобильном. Это раздражает всех, а людям с трудностями чтения просто закрывает путь.

Как проверить свой сайт за полчаса

Не нужны сложные инструменты. Достаточно нескольких проверок.

Увеличьте масштаб страницы вдвое. Ничего не должно наезжать друг на друга, текст не должен обрезаться, горизонтальная прокрутка не должна появляться.

Откройте сайт на телефоне на улице в солнечный день. Самая честная проверка контраста, какая бывает.

Попросите человека старше пятидесяти найти на сайте цену и телефон. Засеките время. Результат обычно отрезвляет.

Пройдите по сайту только клавиатурой. Дойдите до формы и отправьте её.

Отключите изображения и посмотрите, понятно ли, что где было.

Переведите сайт в чёрно-белый режим (это можно сделать средствами браузера) и проверьте, различимы ли кнопки и обязательные поля.

Дайте ссылку на страницу услуги коллеге и попросите за минуту сказать, сколько это стоит. Если не смог — проблема в читаемости, а не в человеке.

Влияние на количество обращений

Это не абстрактная забота, а вполне измеримая вещь. Механика простая.

Человек, который не может прочитать цену, не звонит уточнять — он уходит. Человек, который не попал пальцем в кнопку телефона с третьего раза, закрывает сайт. Человек, который не понял, какое поле формы он не заполнил, бросает заявку на середине. Каждая из этих ситуаций — потерянное обращение, которое вы даже не увидите в статистике: в отчётах это будет просто «посетитель ушёл».

Особенно сильно это бьёт по нишам, где основная аудитория старше сорока: строительство и ремонт домов, загородная недвижимость, медицина, оборудование, услуги для организаций, ритуальные и социальные услуги, всё, что связано с крупными покупками. Там доля людей, которым мелкий серый текст неудобен, очень велика.

Обратная сторона: улучшение читаемости — одна из самых дешёвых работ по сайту вообще. Увеличить шрифт, затемнить текст, увеличить кнопки — это несколько часов работы, а не проект. И результат виден по количеству отправленных форм уже в первый месяц.

Как это связано с продвижением 3 в 1

Удобство чтения влияет на все три точки получения обращений — иногда неочевидным образом.

Поиск, обычный и нейропоиск. Поисковые системы учитывают поведение людей: если посетители быстро уходят со страницы, это сигнал, что она не отвечает на вопрос. Плохо читаемая страница даёт именно такое поведение, даже если содержание отличное. Кроме того, аккуратная структура заголовков, осмысленные подписи к изображениям и понятный текст ссылок — это ровно то, что помогает и программам чтения, и системам, разбирающим содержание сайта. Нейропоиск строит ответ из текста страницы: чем яснее структура и чем прямее формулировки, тем выше шанс, что процитируют вас.

Яндекс.Справочник и Яндекс Бизнес. Здесь читаемость обеспечивает сама площадка, но от вас зависит содержание карточки: понятные названия услуг, разборчивые фотографии, крупный и чёткий прайс на снимках, если вы выкладываете его картинкой. Человек, которому неудобно на сайте, часто возвращается к карточке и звонит оттуда — и поэтому телефон в карточке должен быть актуальным.

2ГИС. Аудитория 2ГИС в среднем старше, чем аудитория поиска, и пользуется приложением на телефоне в дороге. Для неё крупные, разборчивые данные в карточке особенно важны.

И общий вывод: работа только над одной точкой даёт неполный результат. Человек может найти вас в 2ГИС, перейти на сайт, не суметь прочитать условия и позвонить конкуренту. Поэтому обращения с карт нужно считать наравне с заявками с сайта — через отдельные номера или метки, чтобы видеть картину целиком в Яндекс.Метрике.

Что измерять

• Доля посетителей, отправивших форму, до и после изменений — главный показатель.
• Доля брошенных форм — сколько людей начали заполнять и не отправили. Настраивается целями в Яндекс.Метрике.
• Клики по телефону — если кнопку сделали крупнее, число обычно заметно растёт.
• Глубина прокрутки на длинных страницах: после увеличения шрифта и интервала люди дочитывают дальше.
• Поведение возрастных посетителей. В Метрике есть разбивка по возрасту — сравните, как ведут себя посетители старше сорока пяти до и после изменений.
• Записи Вебвизора — самый наглядный способ увидеть, как человек пытается попасть в мелкую кнопку.

Частые ошибки

Поставить кнопку-глаз и считать вопрос закрытым. Основной сайт от этого удобнее не стал.

Сделать отдельную версию, которая не работает. Формы не отправляются, меню разъезжается, часть страниц недоступна — такая версия хуже, чем её отсутствие.

Светло-серый текст ради эстетики. Самая распространённая беда современных сайтов.

Мелкий шрифт в важных местах: цены, условия, сроки, примечания. Именно там он встречается чаще всего.

Кнопки без запаса под палец.

Обозначение только цветом.

Исчезающие подписи полей.

Автовоспроизведение и анимация, которую нельзя остановить.

Проверка только на своём мониторе. Дизайнер смотрит на большом экране с идеальным зрением при хорошем освещении. Клиент — на телефоне, в дороге, вечером, без очков.

Удобство чтения — это не отдельная функция и не дополнительная опция для узкой группы. Это качество сайта, которое одинаково работает на всех: на пожилого руководителя, на прораба на объекте, на человека, который смотрит ваш сайт вечером на диване. Сделать текст крупнее и контрастнее, а кнопки — больше, стоит недорого, а количество обращений повышает вполне заметно.

Если вы не уверены, что ваш сайт удобно читать вашим же клиентам, — специалисты компании «Сайты Профессионально» готовы бесплатно его проверить: посмотреть читаемость на разных устройствах, оценить контраст, размеры элементов и работу форм, и показать, что стоит поправить в первую очередь. За девятнадцать лет работы мы насмотрелись на сайты, которые теряли заявки исключительно из-за того, что клиент не смог разглядеть цену.