Обсудим ваш проект?
Комплексный интернет-маркетинг
15 лет опыта | 90+ специалистов
Отправить заявку

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

Обновлено: 13 августа 2021
Время на прочтение:
Просмотров: 3499
Дарья Иванова
редактор
Александр Гайдай
менеджер управления проектами
Редполитика
Мы прилагаем все усилия, чтобы наши обзоры были максимально честными, точными и объективными. Если вы посещаете ссылки в нашем контенте, мы можем получить комиссионное вознаграждение от ваших покупок, однако это не влияет на нашу редакционную политику и мы не станем рекомендовать продукты или сервисы, в которых не уверены.

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

Какие организации обязаны иметь на сайте версию для слабовидящих

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

  • Органах федеральной, региональной власти;
  • Государственных медучреждениях;
  • Образовательных учреждениях;
  • Учреждениях культуры и искусства;
  • Социальных учреждениях.

Указанные органы должны иметь версию для слабовидящих.

Нет времени разбираться?
Техподдержка сайта на «1С-Битрикс» под ключ
Специализируемся на «1С-Битрикс» более 10 лет и знаем все подводные камни и специфику. Работаем с сайтами любой технической сложности и бизнес-логики. При необходимости подключаем UX-специалиста и дизайнера. В течение 2 часов реагируем на обращения в тикетной системе.
Ваш сайт:

Пример сайта с версией для слабовидящих
Пример сайта с версией для слабовидящих

Общие требования к сайтам для слабовидящих

Версия сайта для слабовидящих должна соответствовать следующим требованиям:

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

Функционал

Людям должны быть доступны:

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

В качестве стандартных цветовых решений принято считать:

  • Фон черного цвета с белым шрифтом;
  • Фон черного цвета с зеленым шрифтом;
  • Фон белого цвета с черным шрифтом;
  • Фон бежевого цвета с коричневым шрифтом;
  • Фон голубого цвета с темно-синим шрифтом.

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

Функционал в версии сайта для слабовидящих
Функционал в версии сайта для слабовидящих

При разработке альтернативных версий для людей с нарушениями зрения необходимо учитывать ГОСТ Р 52 872 − 2012. Согласно стандартам, зафиксированы три степени соответствия доступности:

  • А. Минимальная доступность;
  • АА. Степень средней доступности;
  • ААА. Высшая степень.

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

Привлекли 35.000.000 людей на 185 сайтов
Мы точно знаем, как увеличить онлайн–продажи
Применяем лучшие практики digital–продвижения как из вашей тематики, так и из смежных областей бизнеса. Именно это сделает вас на голову выше конкурентов и принесёт лиды и продажи.
Ваш сайт:

Необходимость масштабирования

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

Возможность отключения изображения

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

Оформление страницы

Удобство прочтения текста должно сопровождаться возможностью регулирования уровня яркости. В то же время необходимо обеспечить необходимый уровень контрастности. При соотношении текста и фона контрастность должна быть не менее 7:1, при крупном тексте подходит 4,5:1.

Также действуют другие требования к оформлению:

  • Основная информация на странице должна умещаться на 2-3 экранах.
  • Ширина строчки составляет не более 80 знаков.
  • Текст не должен быть выровнен по ширине.
  • Запрещается использовать Flash-анимацию.

Удобство управления

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

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

Также необходима разработка способов помощи для ввода информации. Людям с нарушением зрения должны быть предоставлены следующие виды опций:

  • возврат отправленных данных;
  • проверка данных на корректность;
  • проверка, исправление и подтверждение данных перед отправкой.

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

Контент

Обязательное условие – сопровождение нетекстового контента текстовым аналогом. В то же время информация должна быть донесена логичным и удобным языком, обязательно использование заголовков, которые обозначены тегами h1, h2, h3.

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

Как сделать?

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

Скрипт

Пример готового скрипта для создания версии сайта для слабовидящих
Пример готового скрипта для создания версии сайта для слабовидящих

Воспользуемся каталогом от UScript. В числе их универсальных скриптов есть нужный нам скрипт «Версия сайта для слабовидящих». Этот скрипт позволяет сделать версию сайта для слабовидящих на самых популярных CMS. Однако стоит помнить, что корректное отображение элементов зависит от верстки сайта. И важное уточнение, о котором нас предупреждает разработчик, скрипт не подойдет для сайтов на платформе Wix.

Функционал скрипта:

  • Возможность простой установки;
  • Возможность изменения размеров шрифта текста;
  • Возможность настройки межтекстового интервала;
  • Возможность голосового озвучивания текста;
  • Возможность отключения/включения графического контента;
  • Возможность изменения цвета изображений;
  • Наличие качественного набора цветовой палитры.

Стоимость: 7$.

Плагины

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

Почти все подобные плагины содержат:

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

Поддерживающим основные современные версии браузеров и платформ является плагин Button visually impaired. Плагин бесплатный.

Пример плагина для создания версии сайта для слабовидящих
Пример плагина для создания версии сайта для слабовидящих

Частые проблемы и ошибки при разработке версии сайта для слабовидящих

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

На примерах множества сайтов можно убедиться в наличии следующих частых проблем:

  • Съезжает верстка;
  • Некорректное отображение иконки;
  • Некорректное функционирование фокуса;
  • Отсутствие диктора или невозможность прочтения текста встроенным диктором.
  • Возникновение полосы прокрутки при масштабировании страницы.

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

Итак, обобщим еще раз ключевые требования:

  • Текстовое сопровождение всего нетекстового контента, чтобы встроенный в браузер диктор смог его прочитать.
  • Возможность управления через клавиатуру и увеличения шрифта на 200% без полосы прокрутки.
  • Наличие заполненных тегов Title и H1 в каждой странице.
  • Внедрение нескольких шрифтов и цветовых схем, функции отключения картинок.
  • Внедрение опции масштабирования коэффициентов контрастности не менее 7:1. 
Методология выбора
Кто мы
Директ Лайн
Крупнейшее региональное интернет-агентство России. ТОП-10 в рейтинге Рунета.
1200 +
проектов
90
экспертов
16лет
на рынке
Наша методология
Статьи в блоге Директ Лайн - это всегда оригинальный, проверенный и объективный контент. Все обзоры и рейтинги честно отражают наше мнение и опыт взаимодействия с каждым инструментом.
Содержание
Комментарии

Комплекс услуг для вашего бизнеса

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

Кейсы и статьи

Бесплатный аудит SEO
и рекламного трафика
Покажем точки роста вашего проекта,
если по нему уже ведутся работы