Перейти к содержимому

Доступность сайта клиники

Версия для слабовидящих: крупный шрифт, контраст, клавиатура

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

  • Текст масштабируется вместе с браузером
  • Навигация без мышки
  • Совместимость с программами чтения экрана

Первый шаг

  • Бесплатный расчет

Каждое учреждение индивидуально. Точную сумму называем после короткого брифа, до начала работ.

2015

год основания LightSEO

запущенных проектов
250+
сайт, SEO и реклама в одном месте
1 команда
бесплатно устраняем недочеты после запуска
30 дней

Знакомая ситуация

Где сайты клиник подводят пациентов со слабым зрением

01

Серый текст мелким шрифтом

Светло-серые буквы на белом фоне выглядят аккуратно на макете. Человеку со слабым зрением или пожилому пациенту такой текст трудно разобрать, особенно на телефоне на улице.

02

Увеличили масштаб – сломалась страница

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

03

Картинки без описания и кнопки без названий

Человек с программой чтения экрана слышит "изображение, изображение, кнопка". Расписание в картинке, фото прайса, иконка телефона без подписи – для него этой информации на сайте нет.

Как это работает

Пациент за семьдесят записывается к кардиологу сам

Мужчина семидесяти лет хочет записаться к кардиологу. Зрение у него слабое, обычно его записывает внучка. Дома за компьютером он увеличивает масштаб браузера: текст переносится на новые строки, меню не наезжает на заголовок, кнопка записи остается на экране. Цены на странице услуги даны текстом с достаточным контрастом, поэтому и в увеличенном виде остаются четкими.

В форме записи несколько полей с четкими подписями. Он ошибается в номере телефона, и рядом появляется объяснение словами, что именно исправить. Заявка поступает администратору, а пациент получает SMS-подтверждение. На этот раз внучка не понадобилась.

  • Пожилые пациенты записываются сами
  • Меньше звонков с уточнениями
  • Сайт удобен для всех посетителей

Решение Light-med

Что делаем для доступности сайта клиники

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

Контраст и цвета

Текст, ссылки и кнопки имеют достаточный контраст с фоном. Статусы, ошибки в форме и пометки подписываем словами, чтобы их понимал и тот, кто плохо различает цвета.

Крупный шрифт и масштаб

Базовый размер шрифта удобен для чтения. Страница выдерживает увеличение в браузере: текст переносится, меню и кнопка записи остаются на месте, ничего не обрезается.

Переключатель шрифта – отдельным этапом

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

Управление с клавиатуры

Меню, форма записи, выбор услуги и времени проходятся клавишей Tab. Фокус виден, порядок перехода логичный, окна закрываются клавишей Esc.

Подписи для программ чтения экрана

У фото врачей есть альтернативный текст с именем и специальностью, у иконок и кнопок – понятные названия, заголовки идут по порядку. Цены и расписание даны текстом, их можно прочитать вслух.

Простые формы

Каждое поле подписано, ошибка объясняется словами рядом с полем. Минимум полей и крупные зоны нажатия, поэтому записаться можно без точного попадания в мелкую кнопку.

Что входит

Что входит в работу над доступностью

  • Проверка контраста текста, кнопок и ссылок в дизайне
  • Шрифты и отступы, удобные для чтения с телефона и компьютера
  • Проверка страниц при увеличении масштаба в браузере
  • Переключатель шрифта – отдельным этапом
  • Навигация клавиатурой с видимым фокусом
  • Альтернативный текст для фото врачей и изображений услуг
  • Подписи полей и понятные сообщения об ошибках в формах
  • Цены, расписание и контакты текстом, без картинок
  • Инструкция для администратора: как добавлять фото и тексты доступно

Как мы работаем

От брифа до первых пациентов: пять шагов

Вы предоставляете материалы и согласовываете результат. Остальное делает наша команда.

  1. 01

    Бриф и расчет

    Собираем структуру услуг, врачей и прайс. Готовим расчет и спецификацию под ваше учреждение.

  2. 02

    Дизайн и структура

    Подбираем дизайн на основе шаблонов Light-med, согласовываем макеты и вносим правки.

  3. 03

    Наполнение

    Переносим услуги, цены и врачей, готовим тексты и фото, настраиваем формы записи.

  4. 04

    Запуск

    Подключаем домен, сохраняем старые адреса редиректами 301, проверяем скорость и безопасность. Тридцать дней устраняем недочеты бесплатно.

  5. 05

    Продвижение

    Каждый месяц ведем SEO, GEO и Google Ads и отчитываемся о позициях, запросах и записях.

Вопросы

Что спрашивают перед стартом

Чем версия для слабовидящих отличается от обычного сайта?

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

Соответствует ли сайт стандарту доступности?

Мы закладываем конкретные вещи: контраст, масштабирование, навигацию клавиатурой, подписи к изображениям и полям. Сертификатов соответствия стандарту не выдаем. Если клинике нужна формальная проверка, ее проводит независимый специалист, и мы исправляем замечания из его отчета.

Работает ли сайт с программами, которые читают текст вслух?

Да. Размечаем страницы так, чтобы программа чтения экрана правильно объявляла заголовки, меню, кнопки и поля формы. Фото врачей получают описание, иконки – названия. Перед запуском проходим основные страницы и форму записи с программой чтения экрана.

Кто следит за доступностью, когда мы сами добавляем контент?

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

Можно ли сделать доступным наш текущий сайт?

Зависит от того, как он сделан. Часть проблем, например контраст или подписи к фото, можно исправить на месте. Если страницы ломаются при увеличении и не работают с клавиатуры, быстрее запустить сайт на платформе Light-med с редиректами 301 со старых адресов.

Сколько стоит версия для слабовидящих?

Основные решения доступности входят в дизайн сайта на платформе Light-med. Проверку страниц и, если он нужен, отдельный переключатель шрифта и контраста учитываем в спецификации. Точную сумму называем после короткого брифа, до начала работ. Расчет бесплатный.

Расчет

Получите расчет для вашего учреждения

Оставьте контакты. Перезвоним в рабочий день с 9:00 до 18:00 и предложим план запуска сайта и продвижения.

  • Расчет бесплатный
  • Отвечаем в течение одного рабочего дня
  • Аванс только после согласования спецификации

Версия для слабовидящих: для кого она на сайте клиники

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

Доступность закладываем в основной сайт

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

Сайт клиники для слабовидящих: переключатель отдельным этапом

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

Клавиатура и программы чтения экрана

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

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

Перед запуском проходим главную, страницу услуги, карточку врача и форму записи клавиатурой и с программой чтения экрана.

Цены, расписание и контакты текстом

Прайс-справочник Light-med выводит цены текстом на страницах услуг, поэтому их можно увеличить, прочитать вслух и найти поиском. Расписание врачей, адреса отделений и телефоны тоже даем текстом. Скан прайса или график на картинке для человека с программой чтения экрана просто не существует.

Пожилые пациенты и телефон

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

Что остается за клиникой

После запуска клиника сама добавляет новости, акции и фото. Шаблоны страниц уже имеют правильные заголовки и контраст, а администратору мы даем короткую инструкцию: подписывать фото, не публиковать текст на изображениях, не ставить прайс картинкой. Сертификатов соответствия стандартам не выдаем: делаем конкретные вещи, которые можно проверить на странице. Если вам нужна версия для слабовидящих и доступный сайт в целом, оставьте заявку – расчет бесплатный.