Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка

Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка

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

Настроил пять размеров текста, три контрастные цветовые схемы и режимы отображения изображений. Выбор пользователя сохраняется между страницами. Панель получила понятные подсказки, ARIA-атрибуты, видимый клавиатурный фокус и корректное управление без мыши.

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

Попутно доработал общие стили и часть внутренних страниц, включая страницу поиска. Также зафиксировал правила разработки и матрицу проверки для дальнейшего поэтапного развития специальной версии на ширинах от 390 до 1440 px.

Технологии: 1С-Битрикс, PHP, JavaScript, HTML5, CSS3, адаптивная вёрстка, ARIA.

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

Ссылка на видео: https://www.youtube.com/shorts/RJm9Siw9-TA

Скриншоты работы

  • Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка. Скриншот 1
  • Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка. Скриншот 2
  • Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка. Скриншот 3
  • Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка. Скриншот 4
  • Версия для слабовидящих на сайте клиники - 1С-Битрикс, JS и адаптивная вёрстка. Скриншот 5
Обсуждение

Пока никто не оставил комментарий

Оставить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив