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

Время на прочтение
7 мин

Количество просмотров 50K

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

• →
• →

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

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

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

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

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

Эти сайты обязаны иметь версию для слабовидящих.

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

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

• А — доступность минимальна;
• АА — доступность полная;
• ААА — специализированный сайт для инвалидов по зрению.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы пользуетесь 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 рублей.

Чтобы сделать версию сайта для слабовидящих на Тильде добавьте следующий скрипт:

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 вот с такой панелью. И хотя это будет не полноценная версия с максимальной доступностью ААА, соответствующая всем требованиям ГОСТ (а добиться этого практически невозможно), проблем с проверяющими органами и штрафов у организации не будет.

Готовы создать сайт прямо сейчас. А вы?

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

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

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

Иконку (кнопку) переключения на версию для слабовидящих лучше обозначать стандартно, глазом или очками — так, как привычно пользователю. Тут лучше без креатива, чтобы человеку с плохим зрением все было очевидно.

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

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

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

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

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

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

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

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

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

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

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

Оставьте заявку с кратким рассказом о проекте или заполните бриф.

Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

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

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

Как сделать сайт почти осязаемым и в каких случаях придётся подружиться с контрастными шрифтами и аудиоозвучкой (по-хорошему, во всех)

В России проживает более миллиона слепых и слабовидящих людей, а легкие расстройства вроде близорукости есть у каждого второго. Интернет подстраивается под таких людей: у Windows есть функция экранного диктора, существуют программы для озвучки текста вроде Text To Speech Maker или для его увеличения на экране, например, MAGic.

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

Каким сайтам обязательно нужна версия для слабовидящих

В 2016 году

был принят закон

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

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

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

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

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

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

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

— близорукость,
— астигматизм,
— дальтонизм,
— миопия,
— катаракта,
— глаукома.

Соблюсти все требования сложно: на это уйдет много времени и денег. Но на практике достаточно добавить несколько функций, которые упростят чтение. Сложность в том, что их нужно объединить в одну версию — по отдельности функции добавить не получится.

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

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

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

Можно пойти сложным путем — повесить версию сайта со всеми переключателями на отдельный поддомен и по кнопке просто перебрасывать пользователя на него. Так сделано на сайте

Президента РФ

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

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

сайте офтальмологической клиники «Эксимер»

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

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

на сайте новосибирского ВУЗа СибГУТИ

.

Можно написать эти переключатели для CSS на JavaScript самостоятельно. Однако у некоторых CMS есть готовые решения: модули Template Selector и Fast Font для Joomla, плагины Comfortable Reading или For the visually impaired для WordPress.

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

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

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

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

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

Какие проблемы есть с версиями для слабовидящих

Даже если сделать все по ГОСТу, слабовидящим часто будет неудобно пользоваться сайтом. Главная проблема — слишком маленький размер кнопки. Часто заметить ее трудно даже с обычным зрением.

У некоторых сайтов есть отдельный поддомен, например,

http://special.kremlin.ru

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

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

сайта Пенсионного фонда

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

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

Свежие публикации данной категории