Коротко о проекте
"Профразвитие" - учебный центр дистанционного профессионального обучения: охрана труда, повышение квалификации, профессиональная переподготовка, обучение рабочим профессиям и аттестация специалистов. На сайте указан номер лицензии на образовательную деятельность. Мы разработали для учебного центра версию сайта для слабовидящих на WordPress.
Кейс о доступности. Образовательные организации обязаны обеспечивать доступность информации для людей с нарушениями зрения, а для учебного центра это ещё и расширение аудитории: среди слушателей программ по охране труда и переподготовке есть люди старшего возраста и люди с особенностями зрения, которым трудно пользоваться обычной версией сайта.
О клиенте
Учебный центр работает дистанционно и выдаёт по завершении обучения удостоверения, дипломы и свидетельства. Дополнительно заявлены услуги СОУТ, оценки профессиональных рисков и аутсорсинга охраны труда. Собственная онлайн-платформа включает интерактивные материалы, курсы и тренажёры с тестированием, в том числе имитацию экзаменов Ростехнадзора по промышленной и электробезопасности.
Ориентиры стоимости на сайте: охрана труда - от 500 до 2 000 рублей, профессиональная переподготовка - от 8 000 до 25 000 рублей, рабочие профессии - от 2 000 до 8 000 рублей. Процесс: консультация, согласование условий, договор и оплата, обучение, получение документов. Адрес - Переславль-Залесский, связь - телефон, email, Telegram, WhatsApp и VK.
Аудитория - специалисты, руководители и предприятия, которым нужно соответствовать требованиям законодательства.
Задача
- Сделать версию сайта, удобную для людей с нарушениями зрения.
- Сохранить в этой версии всю важную информацию: программы, стоимость, документы, порядок обучения, контакты.
- Дать пользователю возможность переключаться между обычной версией и версией для слабовидящих в один клик.
- Не ломать основную версию сайта и её функции.
Почему доступность важна для учебного центра
У образовательных организаций есть требования к доступности сайтов для людей с инвалидностью по зрению. Помимо требований, это вопрос аудитории: слушатель программы по охране труда может быть человеком предпенсионного возраста, которому мелкий шрифт и низкий контраст мешают изучить условия и записаться. Версия для слабовидящих делает сайт доступным для всех, кто выбирает обучение.
Что мы сделали
Переключатель версий
На сайте появилась кнопка перехода в версию для слабовидящих. Пользователь включает её в один клик и так же легко возвращается к обычной версии. Выбор сохраняется при переходах по страницам, чтобы не включать режим заново на каждой странице.
Настройки отображения
В версии для слабовидящих пользователь может:
- увеличить размер шрифта - несколько уровней размера;
- выбрать цветовую схему - высококонтрастные сочетания фона и текста;
- настроить межбуквенный интервал - для удобства чтения;
- отключить изображения - чтобы оставить только текст.
Упрощённая вёрстка
Версия для слабовидящих отображает страницы в упрощённом виде: основной текст, заголовки, списки и ссылки без декоративных элементов, которые мешают чтению. Информация о программах, стоимости, документах и порядке обучения остаётся доступной.
Совместимость с экранными чтецами
Мы проверили, чтобы структура страниц была понятна программам экранного доступа: правильная иерархия заголовков, подписи к элементам, понятные названия ссылок и кнопок.
Сохранение основной версии
Обычная версия сайта осталась без изменений: каталог программ, формы, личный кабинет и ссылки на портал обучения работают как прежде.
Почему это полезно и для обычных пользователей
Версия с крупным шрифтом и высоким контрастом удобна не только людям с нарушениями зрения. Ею пользуются люди старшего возраста, те, кто читает с телефона на солнце, и те, кто устал после рабочего дня. Для учебного центра, где многие слушатели проходят обязательное обучение по охране труда, это заметная часть аудитории.
Какие требования учитывали
Мы ориентировались на принятые требования к версиям сайтов для слабовидящих: возможность менять размер шрифта, цветовую схему и интервалы, отключать изображения, а также сохранять доступ ко всей важной информации организации.
Этапы работ
- Аудит доступности основной версии сайта.
- Проектирование версии для слабовидящих и набора настроек.
- Разработка переключателя и режима отображения на WordPress.
- Проверка с разными настройками и экранными чтецами.
- Проверка основной версии на сохранность функций.
Как устроен путь пользователя
| Шаг | Что делает пользователь | Что даёт версия для слабовидящих |
|---|---|---|
| Вход | открывает сайт | заметная кнопка переключения |
| Настройка | выбирает шрифт и цвета | удобное чтение |
| Выбор | изучает программы и цены | вся информация в упрощённом виде |
| Решение | читает порядок обучения | понятные шаги и документы |
| Связь | звонит или пишет | контакты доступны в любой версии |
Ошибки, которых мы избегали
- Отдельный сайт для слабовидящих. Две версии с разным контентом быстро расходятся. Версия для слабовидящих показывает те же данные, что основная.
- Кнопка, которую трудно найти. Переключатель размещён на видном месте.
- Сброс настроек на каждой странице. Выбор пользователя сохраняется при переходах.
- Только увеличение шрифта. Для многих пользователей важнее контраст и упрощённая вёрстка, чем просто крупный текст.
Технологии
- Платформа: WordPress.
- Доступность: переключатель версий, настройки шрифта, цвета, интервала и изображений.
- Вёрстка: упрощённый режим отображения, иерархия заголовков, подписи элементов.
Результат
| Что появилось | Зачем |
|---|---|
| Версия для слабовидящих | доступность информации об обучении |
| Настройки шрифта и цвета | удобное чтение для разных нарушений зрения |
| Совместимость с экранными чтецами | доступ для незрячих пользователей |
| Сохранённая основная версия | стабильная работа сайта |
Учебный центр получил сайт, информацию на котором могут изучить люди с нарушениями зрения.
Как проверять доступность сайта
| Проверка | Что показывает |
|---|---|
| Переключение версий | работает ли режим на всех страницах |
| Масштаб шрифта | не ломается ли вёрстка при увеличении |
| Контраст | читается ли текст в каждой цветовой схеме |
| Экранный чтец | понятна ли структура страницы |
Для кого подходит такой подход
- образовательным организациям и учебным центрам;
- медицинским учреждениям и социальным сервисам;
- государственным и муниципальным организациям;
- компаниям с аудиторией старшего возраста.
Что взять себе
Проверьте свой сайт на доступность. Увеличьте шрифт в браузере и посмотрите, не ломается ли вёрстка.
Сделайте переключатель заметным. Пользователь не должен искать версию для слабовидящих.
Думайте о контрасте. Серый текст на светлом фоне выглядит стильно, но плохо читается.
Соблюдайте структуру. Правильные заголовки помогают и экранным чтецам, и поисковикам.
Частые вопросы
Обязательна ли версия для слабовидящих? Для образовательных организаций есть требования к доступности сайтов. Для других компаний это способ не терять часть аудитории.
Что должно быть в версии для слабовидящих? Увеличение шрифта, высококонтрастные цветовые схемы, упрощённая вёрстка и возможность отключить изображения.
Можно ли сделать такую версию на WordPress? Да, режим отображения и переключатель встраиваются в существующий сайт.
Влияет ли доступность на SEO? Правильная структура заголовков, подписи изображений и понятные ссылки полезны и для поисковиков.
Нужно ли делать отдельный сайт? Нет, лучше режим отображения того же сайта: так информация всегда совпадает.
Сохраняется ли выбор версии? Да, настройки сохраняются при переходах по страницам.
Сколько времени занимает внедрение версии для слабовидящих? Основное время уходит на аудит текущей вёрстки и проверку всех страниц в новом режиме, сама разработка встраивается в существующий сайт.
Как мы работаем с образованием
Для учебных центров и онлайн-школ мы делаем сайты, доработки, доступность и аналитику. Подробнее - в отрасли Образование и услуге Сайты. Другой проект в образовании - SF Education.
Нужно сделать сайт доступным или доработать функционал? На бесплатном разборе проверим ваш сайт и покажем, что можно улучшить.
