WebValley Studio

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

С 1 января 2016 года действует поправка к Федеральному закону № 8 от 09 февраля 2009, обязующая владельцев сайтов иметь версию для слабовидящих, чтобы не допустить дискриминации в отношении инвалидов по зрению
tilda версия для слабовидящих

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

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

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

По законам Российской Федерации любой интернет-ресурс должен иметь версию для слабовидящих во избежание нарушения прав инвалидов. Тем не менее, контроль за соблюдением этих норм осуществляется только по отношению к:
  • Органам государственной и муниципальной власти;
  • Организациям здравоохранения;
  • Учебным заведениям;
  • Учреждениям культуры и искусства;
  • Социальным учреждениям.
Эти сайты обязаны иметь версию для слабовидящих.
адаптация сайта для слабовидящих
Полная версия сайта академического театра оперы и балеты имени М.И. Глинки
версии для слабовидящих
Версия для слабовидящих сайта академического театра оперы и балеты имени М.И. Глинки

Требования доступности для инвалидов по зрению

При создании версии сайта для слабовидящих, разработчик руководствуется ГОСТ Р 52 872 − 2012 «Требования доступности интернет-ресурсов для инвалидов по зрению». Данный документ выделяет три уровня доступности сайта для слабовидящих:
  • А — доступность минимальна;
  • АА — доступность полная;
  • ААА — специализированный сайт для инвалидов по зрению.
В идеале, нужно стремиться к уровню ААА, но не всегда есть техническая возможность соблюсти все необходимые требования. Поэтому, разработчик должен помнить, что для того чтобы избежать штрафов и санкций от проверяющих органов, достаточно иметь на сайте версию А — минимального уровня доступности.

Что учесть при разработке версии сайта для слабовидящих

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

Требования к масштабируемости

Шрифт увеличивается до 200%, при этом не появляется горизонтальная полоса прокрутки. Такой эффект достигается при помощи масштабируемой верстки.
версии сайта для слабовидящих
100% размер сайта
версии сайтов для слабовидящих
Увеличение шрифта до 200% - при масштабировании не появилось горизонтального скролла, значит, версия для слабовидящих отвечает требованиям

Встроенная возможность увеличения шрифта

Панель управления версии для слабовидящих должна включать встроенный инструмент увеличения шрифта, без необходимости увеличивать его в браузере
версия для слабовидящих
В идеале — 3 размерности: 100%, 200%, 500%

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

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

Цвет — не способ передачи информации

Допускается использовать не только черно-белый, но и цветной интерфейс. Только учитываем, что цвет не должен использоваться как способ передачи информации (например, «заполните красные поля» — как это должен сделать человек, не различающий цвета?)
версия для слабовидящих для сайта
Сайт Росаккредитации: в версии для слабовидящих есть цветные элементы дизайна, но они не несут ничего важного для понимания контента

Медиа контент заменяем текстовым аналогом

Атрибут Alt для изображений принято прописывать с использованием ключевых фраз для лучшей индексации страницы и SEO-продвижения. Однако, при разработке версии сайта для слабовидящих, нужно вспомнить об истинном назначении атрибута Alt — это альтернативный текст к изображению. Чтобы пользователь страдающий проблемами со зрением лучше понимал контент на странице, прописывайте Alt в зависимости от того, что изображено на картинке, а не ключами.
версия для слабовидящих для сайта гост
Сайт Боткинской больницы: вместо фотографий в «слепой версии» появляются текстовые описания, которые помогают понять содержимое. Обратите внимание, что косяки, в виде недописанных Alt сразу видны в этом режиме просмотра
У всей графической и медиа информации на сайте должен быть текстовый аналог: у изображений, видео, кнопок, полей формы, фоновых элементов дизайна (если они важны для понимания контента).

Контрастность контента и фона

Коэффициент контрастности текста к фону и значимых элементов дизайна к фону — минимум 7:1. Для увеличенного текста — минимум 4,5:1. Есть много сервисов, для проверки этого соотношения, например Webaim Contrast Checker — вбиваете HEX номера обоих цветов в формате #FFFFFF, и сервис сразу выводит коэффициент.
версия для слабовидящих иконка
Интерфейс Webaim Contrast Checker
Если вы пользуетесь Figma, то плагин Stark поможет справиться с этой задачей.

А что делать с логотипом

Требования к контрастности, масштабированию и подписыванию альтернативным текстом не распространяются на логотип компании. Если у вас есть лого в монохромном исполнении — используйте его, если нет — допустимо оставить все как есть.
версия для слабовидящих как сделать
версия для слабовидящих картинки
Цветной логотип на сайте ФТС меняется на черно-белый. Но это необязательно

Выбор цветовой схемы

У пользователя должна быть возможность выбирать цвет верхнего слоя и фона из 5 вариантов:
  • Черный на белом;
  • Белый на черном;
  • Темно-синий на голубом;
  • Коричневый на бежевом;
  • Зеленый на темно-коричневом.
Это связано с особенностями цветовосприятия при разных аномалиях зрения: пользователь может четко видеть одни цвета и совершенно не различать другие.

Лендинг и версия для слабовидящих — несовместимы

По ГОСТу страница должна быть не длиннее 2−3 экранов. Это значит, что полноценный лендинг и версия для слабовидящих несовместимы.

Нет посторонних включений

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

Капча

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

Управление с клавиатуры

Одно из самых сложно реализуемых требований — любые действия на сайте можно осуществлять только с клавиатуры, не прибегая к помощи мыши. Страница скроллится кнопками вверх-вниз. Элементы выделяются пробелом, переключаются клавишей Tab, действие подтверждается клавишей Enter. И хотя это требование в большей мере относится к доступности сайта для людей с нарушением моторики рук, ГОСТ также предъявляет его и к версии для слабовидящих.

Нет временных ограничений

Никакое действие на сайте не совершается с ограничением по времени. Нет перенаправлений на другую страницу через N секунд. Инвалидам по зрению нужно достаточно времени на считывание и понимание контента.

Аккуратная верстка текста

Текст дробим на абзацы, заголовки и подзаголовки, оборачиваем в теги <h> - люди с проблемами со зрением обычно пользуются программами, которые голосом зачитывают контент. Данный софт в первую очередь распознает заголовки и сначала зачитывает их.

Нет pdf файлов

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

Использование таблиц

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

Требования к кеглям шрифта, отступам, интервалам, интерлиньяжу

ГОСТ предъявляет требования к разметке текстового контента:
  • Ширина строки не более 80 символов;
  • Нет текста выровненного по ширине;
  • Межстрочка внутри абзаца минимум в 1,5 раза больше кегля шрифта;
  • Отступы между абзацами минимум в 1,5 раза больше, чем межстрочка и минимум в 2 раза больше кегля шрифта;
  • Интервал между буквами минимум 0,12 от кегля шрифта;
  • Интервал между словами минимум 0,16 от кегля шрифта.

Ридеры для слепых и слабовидящих

Программы экранного доступа для слабовидящих должны корректно работать на сайте. (Jaws for Windows, MAGic, ONYX camera, NVDA, дисплей Брайля). Не забудьте протестировать, как ведут себя эти сервисы на вашем сайте, вся ли информация корректно считывается.

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

За отсутствие версии для слабовидящих на сайте предусмотрена как административная, так и уголовная ответственность:
  • По КоАП РФ — штраф от 3 000 рублей для физических лиц и 50 000 — 100 000 рублей для юридических;
  • По УК РФ — штраф до 300 000 рублей.

Как сделать версию для слабовидящих для сайта на Tilda

Чтобы сделать версию сайта для слабовидящих на Тильде добавьте следующий скрипт:
1) В настройках сайта находим вкладку «Еще» → «HTML для вставки в head», прописываем:
<script src="https://lidrekon.ru/slep/js/uhpv-full.min.js"></script>
2) Добавляем код кнопки в блок Т123 из категории «Другое» или, если работаете в Zero-block, выбираем элемент HTML, прописываем:
<a id="specialButton" href="#">
<img src="https://lidrekon.ru/images/special.png" alt="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ"
title="ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ"/>
</a>
версия сайта для слабовидящих скрипт
Получится версия сайта для слабовидящих на Tilda вот с такой панелью. И хотя это будет не полноценная версия с максимальной доступностью ААА, соответствующая всем требованиям ГОСТ (а добиться этого практически невозможно), проблем с проверяющими органами и штрафов у организации не будет.
Готовы создать сайт прямо сейчас. А вы?

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

Версия для слабовидящих бывает реализована на сайте настолько криво, что в ней теряется смысл. Пересмотрев десятки сайтов, мы выделили самые распространенные проблемы и ошибки.

Неочевидная иконка

Иконку (кнопку) переключения на версию для слабовидящих лучше обозначать стандартно, глазом или очками — так, как привычно пользователю. Тут лучше без креатива, чтобы человеку с плохим зрением все было очевидно.
для слабовидящих людей сайт
Иконка в виде очков на сайте Росаккредитации и продублированная надпись «версия для слабовидящих»
для слабовидящих сайт
Понятная заметная иконка в виде глаза на портале ДВФУ
значок для слабовидящих на сайте
Контрастная кнопка с иконкой в виде глаза у Боткинской больницы
иконка версия для слабовидящих
Не самая очевидная иконка, но большой размер, продублированная надпись и хороший контраст делают ее заметной
иконка для слабовидящих
Классическая иконка в форме глаза — лучший вариант привычный пользователю
как адаптировать сайт для слабовидящих
А вот так делать не надо — значок Аа на сайте Минпромторга. Может ли неподготовленный человек догадаться, что это версия для слабовидящих?
как добавить версию для слабовидящих на сайт
Еще один пример неудачной иконки на портале Конституционного суда — в очень мелком кружке вставлен фрагмент таблицы Сивцева, по которой проверяют зрение. Креативно — да. Понятно — нет.

Запрятанная кнопка переключения на версию для слабовидящих

На некоторых ресурсах кнопка переключения запрятана так, что даже зрячий не найдет. Продумайте ее расположение так, чтобы она была заметна.
как должен выглядеть сайт для слабовидящих
Хороший пример расположения кнопки — в шапке сайта в верхнем левом углу, с хорошей контрастностью — здесь ее точно найдут
как на сайте сделать версию для слабовидящих
А это сайт Президента РФ — переключение на версию для слабовидящих находится в подвале, написано мелким шрифтом, со слабым контрастом, в колонке среди других ссылок — нужно очень постараться, чтобы найти ее здесь
как сделать версию для слабовидящих
Похожая ситуация на сайте ФТС — кнопка расположена в подвале, среди других навигационных элементов — как человек с плохим зрением должен долистать страницу до конца и найти что-то в этой «дедушкиной кладовке» — загадка
как сделать версию для слабовидящих на сайте
Смогли бы вы найти на сайте Министерства Просвещения Р Ф переключатель на версию для слабовидящих, если бы мы не подчеркнули его красным? Нет иконки, контраст текста относительно фона слабый, ссылка расположена среди других аналогичных, никак не выделяется

Отдельный поддомен

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

Меньше контента, чем в полной версии

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

Некорректная работа экранного диктора

«Слепая» версия не имеет встроенного экранного диктора, либо он работает некорректно: считывает не весь контент, произносит с ошибками, пока идет озвучка не получается выбрать элементы на экране. Мы рекомендуем тестировать функцию экранного диктора перед запуском сайта.

Урезанный функционал панели управления

Часто версию для слабовидящих добавляют на сайт только для того, чтобы выполнить требования закона и избежать штрафов, а не для реальной помощи инвалидам. На сайт устанавливается панель управления с минимальным функционалом, не закрывающая потребности людей с различными нарушениями зрения или восприятия. Например, при дислексии недостаточно просто сделать шрифт побольше и изменить цветовую схему. Текст все равно будет смазываться. Людям с таким дефектом восприятия будет полезна настройка, увеличивающая межбуквенное расстояние или возможность выбрать шрифт с засечками.
как сделать на сайте версию для слабовидящих
Урезанная панель на сайте Минпросвещения Р Ф. Все, что можно сделать — поменять размер шрифта, включить или выключить картинки и всего 3 цветовые схемы
как сделать сайт для слабовидящих
Расширенная полноценная панель на сайте Боткинской больницы
Автор статьи
Вероника Юдина
Руководитель SEO
10.01.2021
Заказать сайт с версией для слабовидящих
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!