Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Версия сайта для слабовидящих: как сделать и что нужно учесть
С 1 января 2016 года действует поправка к Федеральному закону № 8 от 09 февраля 2009, обязующая владельцев сайтов иметь версию для слабовидящих, чтобы не допустить дискриминации в отношении инвалидов по зрению
Что такое версия сайта для слабовидящих
Крупный шрифт, повышенная контрастность, замена медиаконтента текстовым, подстройка визуала под особенности восприятия — все это может сделать сайт доступным для людей с проблемами со зрением. Остановимся подробно на каждом требовании в следующих разделах, но сначала выясним, на каждом ли сайте нужна версия для слабовидящих.
Какие организации обязаны иметь на сайте версию для слабовидящих
По законам Российской Федерации любой интернет-ресурс должен иметь версию для слабовидящих во избежание нарушения прав инвалидов. Тем не менее, контроль за соблюдением этих норм осуществляется только по отношению к:
- Органам государственной и муниципальной власти;
- Организациям здравоохранения;
- Учебным заведениям;
- Учреждениям культуры и искусства;
- Социальным учреждениям.
Эти сайты обязаны иметь версию для слабовидящих.
Полная версия сайта академического театра оперы и балеты имени М.И. Глинки
Версия для слабовидящих сайта академического театра оперы и балеты имени М.И. Глинки
Требования доступности для инвалидов по зрению
При создании версии сайта для слабовидящих, разработчик руководствуется ГОСТ Р 52 872 − 2012 «Требования доступности интернет-ресурсов для инвалидов по зрению». Данный документ выделяет три уровня доступности сайта для слабовидящих:
- А — доступность минимальна;
- АА — доступность полная;
- ААА — специализированный сайт для инвалидов по зрению.
В идеале, нужно стремиться к уровню ААА, но не всегда есть техническая возможность соблюсти все необходимые требования. Поэтому, разработчик должен помнить, что для того чтобы избежать штрафов и санкций от проверяющих органов, достаточно иметь на сайте версию А — минимального уровня доступности.
Что учесть при разработке версии сайта для слабовидящих
Рассказываем простыми словами, каким требованиям должна отвечать версия сайта для слабовидящих, чтобы интернет-ресурс был удобен для инвалидов по зрению, а владелец сайта не нарвался на штраф.
Требования к масштабируемости
Шрифт увеличивается до 200%, при этом не появляется горизонтальная полоса прокрутки. Такой эффект достигается при помощи масштабируемой верстки.
100% размер сайта
Увеличение шрифта до 200% - при масштабировании не появилось горизонтального скролла, значит, версия для слабовидящих отвечает требованиям
Встроенная возможность увеличения шрифта
Панель управления версии для слабовидящих должна включать встроенный инструмент увеличения шрифта, без необходимости увеличивать его в браузере
В идеале — 3 размерности: 100%, 200%, 500%
Возможность отключить изображения
Причины дефектов зрения различны. При одних нарушениях человек распознает, что изображено на картинках, при других — нет. Поэтому в версии для слабовидящих должна быть функция включения и отключения изображений.
Цвет — не способ передачи информации
Допускается использовать не только черно-белый, но и цветной интерфейс. Только учитываем, что цвет не должен использоваться как способ передачи информации (например, «заполните красные поля» — как это должен сделать человек, не различающий цвета?)
Сайт Росаккредитации: в версии для слабовидящих есть цветные элементы дизайна, но они не несут ничего важного для понимания контента
Медиа контент заменяем текстовым аналогом
Атрибут 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
Заказать сайт с версией для слабовидящих
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.