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

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

Дарья Иванова,
редактор
Александр Гайдай,
Менеджер управления проектами
Поделиться
Просмотров:
2329
Время на прочтение:
Статья обновлена:
13 августа 2021
Информация о статье
Просмотров: 2329
Время на прочтение:
Статья обновлена: 13.08.2021
Дарья Иванова, редактор
Александр Гайдай, Менеджер управления проектами
Поделиться

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

Директ Лайн
Кто мы
Крупнейшее агентство
интернет-маркетинга за МКАДом:
1200+ проектов
70 специалистов
15 лет на рынке
ТОП-10
лучших компаний интернет-продвижения России 2020
Коммерческое предложение

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

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

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

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

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

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

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

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

Функционал

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

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

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

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

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

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

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

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

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

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

Согласно требованиям, должна быть реализована возможность увеличения шрифта на 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. 

Комментарии
ДОБАВИТЬ КОММЕНТАРИЙ
Поможем с сайтами на Битрикс!
Разрабатываем, развиваем и обеспечиваем бесперебойность работы сайтов на Bitrix. Работаем с сайтами любой технической сложности и бизнес-логики. В течение 2 часов реагируем на любые ваши задачи в тикетной системе. В команде 6 программистов и 3 технических менеджера.


Работающие инструменты SEO, интернет–рекламы, UX от
60 профессионалов
Директ Лайн — агентство интернет–маркетинга с 15-летним опытом, 1200+ клиентами и 50+ специалистами. Мы сами ведем этот блог. Раз в месяц пришлём самые интересные и полезные материалы.
  • #SEO
  • #интернет-реклама
  • #email-рассылки
  • #юзабилити сайта
  • #веб–разработка на bitrix
  • #кейсы
60 профессионалов
Раз в месяц
Без спама и СМС