Версия сайта для слабовидящих. Чек-лист.

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

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

Поэтому, в соответствии с Федеральным законом от 1 декабря 2014 г. N 419-ФЗ начиная с 2016 года каждый сайт обязан иметь версию для слабовидящих. Требования по доступности сайта прописаны в ГОСТе Р 52872-2012 "Интернет-ресурсы. Требования доступности для инвалидов по зрению".

Чаще отдельная версия используется на сайтах государственных служб, сайтах учебных учреждений, учреждений здравоохранения и сайтах банков.

Чек-лист

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

Поэтому, решили составить краткий чек-лист о том, что должно быть учтено при такой разработке:

  1. Контрастность текста
    По ГОСТу текст к фону должен быть контрастен в соотношении 7 к 1.
    Для подбора сочетаний используйте сервис WebAIM

    webaim

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

  2. Размер шрифта
    Если в заголовках сайта используется шрифт размером 50px, не нужно его увеличивать.Это приемлемый размер. Но если тексты написаны маленьким шрифтом (10-15px), лучше увеличить их раза в 2.

    Пример:

    шрифт без адаптации
    Шрифт в обычной версии

    шрифт после адаптации
    Шрифт, адаптированный для слабовидящих

  3. Масштабирование контента
    Это важно и для SEO-оптимизации, и для рекламных кампаний, но при масштабировании версии для слабовидящих, не должно появляться горизонтальной прокрутки.

  4. Управление клавиатурой
    Сайт должен быть удобен для полноценного использования без мыши. Переключение между ссылками должно быть доступно с помощью кнопки "Tab".

  5. Адаптивный контент
    Если на сайте есть тексты, размещенные в виде изображения, в версии для слабовидящих они должны дублироваться текстовой версией, которая сможет масштабироваться.
    Если используется капча, она должна иметь аудио-версию.
    Капча с аудио-версией
    Капча с аудио-версией

  6. Не перегружать страницы
    Даже при умеренном масштабировании объем популярных страниц (особенно навигационных, таких как "Главная", "Контакты") не должен превышать 2-3 экрана. Не перегружайте их.

Кстати, есть лёгкий способ реализации версии сайта для слабовидящих с использованием специальной панели. В ней пользователь может сам выбрать цвет фона и текста, размер и вид шрифта (с засечками и без), размер интервалов, отключить изображения или отобразить их в черно-белом варианте.

Ошибки

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

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

Если разобраться, даже без создания специальной версии обычный сайт можно адаптировать под перечисленные требования. Возможности дизайна и верстки это позволяют.

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

Предыдущая статья
Медийная реклама в воронке продаж
На какую аудиторию работает медийная реклама и как сочетать её с контекстной рекламой.

Отправьте заявку

Мы свяжемся с вами в течение рабочего дня

Отправьте заявку

И мы свяжемся с вами в течении рабочего дня

Благодарим Вас за обращение.
Мы скоро с Вами свяжемся.