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

Зачем нужна версия для слабовидящих?

• Законодательные нормы. С 1 января 2016 года в России действует закон, обязывающий владельцев сайтов иметь версию для слабовидящих. Это помогает предотвратить дискриминацию в отношении инвалидов по зрению.
• Целевая аудитория. Версия для слабовидящих делает сайт доступным для людей с различными видами нарушений — зрения, слуха, моторики и других.
• Улучшение общей доступности. Сайты, приспособленные для людей с особыми потребностями, также легче воспринимаются обычными пользователями.

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

По законам Российской Федерации любой интернет-ресурс должен иметь версию для слабовидящих во избежание нарушения прав инвалидов. Тем не менее, контроль за соблюдением этих норм осуществляется только по отношению к следующим категориям организаций:

1. Органы государственной и муниципальной власти. Государственные и муниципальные органы обязаны иметь версию сайта для слабовидящих, чтобы обеспечить доступность информации для всех граждан.
2. Организации здравоохранения. Медицинские учреждения, больницы, клиники и другие организации в сфере здравоохранения также должны предоставлять версию сайта, которая удобна для слабовидящих пользователей.
3. Учебные заведения. Вузы, школы, колледжи и другие образовательные учреждения обязаны следить за доступностью своих сайтов для всех пользователей, включая слабовидящих.
4. Учреждения культуры и искусства. Театры, музеи, галереи и другие культурные учреждения также должны иметь версию сайта, которая учитывает потребности слабовидящих посетителей.
5. Социальные учреждения. Организации, которые предоставляют социальные услуги, такие как центры занятости, помощь бездомным и другие, также обязаны следить за доступностью своих сайтов.

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

Требования к версии для слабовидящих

Для создания версии сайта, которая будет удобной для слабовидящих, следует руководствоваться ГОСТ Р 52872−2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Вот некоторые ключевые требования:

1. Масштабируемая верстка. При масштабировании страницы не должна появляться горизонтальная прокрутка. Сайт должен оставаться читаемым.
2. Увеличение шрифта. Версия для слабовидящих должна поддерживать увеличение шрифта до 200%. Панель управления версии для слабовидящих должна включать встроенный инструмент увеличения шрифта, чтобы пользователи не зависели от настроек браузера.
3. Контрастность. Версия сайта для слабовидящих должна обеспечивать хорошую контрастность между текстом и фоном. Рекомендуется использовать темные шрифты на светлом фоне или светлые шрифты на темном фоне. Это поможет улучшить читаемость для пользователей с ограниченным зрением.
4. Альтернативные тексты для изображений. Все изображения на сайте должны иметь альтернативный текст (атрибут alt). Этот текст будет озвучиваться программами чтения с экрана, позволяя слабовидящим пользователям понимать содержание изображений.
5. Легкость навигации. Сайт должен иметь простую и последовательную структуру. Навигационные элементы, такие как меню, кнопки и ссылки, должны быть легко обнаруживаемыми и понятными. Рекомендуется использовать семантические элементы HTML, такие как <nav>, <header> и <footer>.
6. Формы и поля ввода. Формы на сайте должны быть доступными для слабовидящих. Каждое поле ввода должно иметь ясное описание (атрибут aria-label или aria-labelledby). Также рекомендуется предоставить подсказки для правильного заполнения форм.
7. Распознавание языка. Если сайт поддерживает несколько языков, то каждая страница должна иметь явно указанный язык (атрибут lang). Это поможет программам чтения с экрана правильно озвучивать текст на нужном языке.

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

Ответственность за отсутствие версии сайта для слабовидящих

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

1. Штрафы и судебные разбирательства. Владельцы сайтов могут быть подвергнуты административной и уголовной ответственности в виде штрафов:
   — По КоАП РФ — штраф от 3 000 рублей для физ. лиц и 50 000 — 100 000 рублей для юридических;
   — По УК РФ — штраф до 300 000 рублей.
   Так же могут прилететь судебные иски со стороны пользователей, которые не могут воспользоваться сайтом из-за отсутствия доступной версии.
2. Утрата пользователей. Недоступность сайта для слабовидящих может привести к утрате пользователей. Люди с ограниченными возможностями будут искать альтернативные ресурсы, которые учитывают их потребности.
3. Репутационные риски. Отсутствие версии для слабовидящих может негативно сказаться на репутации владельцев сайта. Общественное мнение может быть негативным, особенно если сайт принадлежит организации или компании.

Примеры готовых решений (плагины и скрипты) и их внедрений на сайт

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

Button Visually Impaired (BVI)

BVI — это бесплатный плагин, который автоматически изменяет версию вашего сайта для слабовидящих людей. Он предоставляет панель на сайте, которая позволяет пользователям изменять цветовую гамму, размеры шрифтов и даже озвучивать изменения с помощью синтезатора речи. Соответствует ГОСТ Р 52872-2012 и самый продвинутый который попался мне.

Он предоставляется в 2х вариантах:

• Wordpress плагин — установка на WP обычная.
• JS скрипт (без зависимостей). Рассмотрим как его установить.

Установка для не WordPress сайтов, протекает примерно так:

1. Скачиваем архив с JS плагином к себе на ПК с оф. сайта или с данного блога.
   
2. Распаковываем архив, в нем увидите 3 папки (dist, src, test) и прочие файлы:
   
3. Заливаем папку dist (со всем ее содержимым) в корень сайта (к примеру по FTP или при помощи файлового менеджера хостинга).
4. Подключите файл стилей внутри тега <head>, желательно перед другими аналогичными ссылками на CSS-таблицы в вашем макете. Пример:<link rel="stylesheet" href="/dist/css/bvi.min.css" type="text/css">.
5. Подключите скрипт перед закрывающим тегом </body>. Пример: <script src="/dist/js/bvi.min.js"></script>.
6. Активируйте работу скрипта, для этого вставляете после подключения основного скрипта (тоже перед закрывающим тегом </body>), вот такой вызов: <script type="text/javascript">new isvek.Bvi();</script>.
   При желании скрипту можно предварительно передать настройки. Вместо кода выше можно вставить, например, такой:

   <script type="text/javascript">
    new isvek.Bvi({
    lang: 'ru-RU',
    target: '.className',
    fontSize: 21,
    theme: 'white'
    });
    </script>

   Здесь устанавливается русский язык, меняется целевой класс, который вызывает работу скрипта, предустанавливается размер шрифта и тема меняется на белую. Все доступные параметры смотрите в таблице на github.

7. Добавьте ссылку запуска скрипта. Она вставляется там, где вам удобно. Пример: <a href="#" class="bvi-open" title="Версия сайта для слабовидящих">Версия сайта для слабовидящих</a>
   Главный атрибут – наличие класса «bvi-open». Именно он отвечает за активацию при нажатии.
8. Готово, теперь при клике на кнопку сайт будет переключаться на версию для слабовидящих и в верхней части страницы будет показываться панель настроек.

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

<div class="bvi-speech">Тут размещается текст для синтеза речи, система работает на базе Web Speech API, то есть синтезируется браузером</div>
 <div class="bvi-no-styles">Этот блок не будет менять свой внешний вид при включении версии для слабовидящих</div>
 <div class="bvi-show">Этот блок будет обязательно показан при включении версии для слабовидящих, но в обычной версии сайта будет скрыт</div>
 <div class="bvi-hide">Этот блок будет скрыт при включении версии для слабовидящих, но показан в обычной версии</div>

jQuery скрипт от lidrekon

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

Устанавливается он вот так:

Переходим на оф. страницу скрипта. Проматываем ее немного вниз до блока «Установка кода на сайт», далее:

• Выберите кодировку сайта: скорее всего это UTF-8.
• Выберите расположение меню скрипта: вверху или снизу.
• Получаете код для вставки в секцию head: соответственно подключаем его к сайту.
• И подключаете кнопку в нужном месте сайта.

Прочие готовые решения

• Плагин для WordPress Accessibility Helper (WAH) — бесплатная версия с копирайтом и без озвучки, а платная стоит дорого.
• Платный скрипт от uScript за 7$.
• Модуль «МИБОК: Версия для слабовидящих», для CMS WordPress и Joomla (бесплатно), для 1С-Битрикс – от 4900 до 15900 руб.
• FineVision — еще одно универсальное решение для любых платформ (платный).
• visuallimpaired — простенький универсальный скрипт на jQwery.

Заключение

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