Содержание11
- Что такое версия сайта для слабовидящих
- Кому версия для слабовидящих обязательна по закону?
- Нужна ли версия для слабовидящих коммерческому сайту?
- Что требует постановление № 102
- Отдельная версия или доступный сайт: что выбрать
- WCAG 2.2 и ГОСТ Р 52872-2019: на что опираться
- Как сделать сайт доступным для слабовидящих
- Как проверить, доступен ли сайт слабовидящим?
- Частые ошибки с версией для слабовидящих
- Частые вопросы
- Источники
Версия сайта для слабовидящих — режим с крупным шрифтом и контрастной схемой, который включают кнопкой в шапке. Обязательна доступность для инвалидов по зрению сайтам госорганов, органов местного самоуправления и подведомственных им организаций: требования к ним утвердило Правительство РФ постановлением № 102. Отдельную «версию» постановление не требует — параметрам должен соответствовать сам сайт. Для коммерческого сайта такой обязанности в этих актах нет, но те же приёмы делают сайт удобнее для всех.
Что такое версия сайта для слабовидящих
Так называют альтернативный режим отображения сайта. Обычно его включают кнопкой со значком глаза в шапке, после чего сайт перестраивается: шрифт становится крупнее, фон и текст — контрастнее, картинки можно скрыть, а интервалы между буквами и строками — увеличить. Часто такой режим подключают готовым скриптом поверх существующего сайта.
Исторически такой переключатель появился на сайтах госорганов как ответ на требования к доступности. Поэтому многие считают, что «версия для слабовидящих» и есть доступность. Это не так. Человек, который пользуется программой экранного доступа, не видит ни крупного шрифта, ни контрастной схемы: ему нужно, чтобы программа могла прочитать структуру страницы, подписи к картинкам и полям формы, а сайт управлялся с клавиатуры.
Поэтому полезно различать два понятия. Версия для слабовидящих — один из инструментов. Доступный сайт — свойство самого сайта, которое проверяется по конкретным параметрам: контрасту, масштабированию, работе с клавиатуры и вспомогательными технологиями.
Кнопка с глазом меняет оформление. Доступность — это то, может ли человек с нарушением зрения прочитать сайт и выполнить на нём действие.
Кому версия для слабовидящих обязательна по закону?
Обязанность установлена для официальных сайтов государства. По части 6 статьи 10 Федерального закона № 8-ФЗ «Об обеспечении доступа к информации о деятельности государственных органов и органов местного самоуправления» требования к доступности для инвалидов по зрению сайтов государственных органов, органов местного самоуправления и подведомственных организаций устанавливает Правительство РФ.
Сами требования утверждены постановлением Правительства РФ № 102. Оно прямо называет, кто их выполняет: государственные органы, органы местного самоуправления и подведомственные им организации должны обеспечить соответствие своих официальных сайтов параметрам доступности. Подведомственные организации — это учреждения, которые подчиняются этим органам, поэтому требования касаются не только сайтов министерств и администраций.
Если ваша организация входит в этот круг, проверять стоит именно по тексту постановления, а не по привычному набору функций переключателя. У образовательных организаций есть ещё отраслевой документ — требования Рособрнадзора к структуре официального сайта образовательной организации (приказ № 1493). Сайт государственной или муниципальной школы проверяют по обоим документам.
Факт. Постановление Правительства РФ № 102 обязывает госорганы, органы местного самоуправления и подведомственные им организации обеспечить соответствие официальных сайтов параметрам доступности для инвалидов по зрению.
Нужна ли версия для слабовидящих коммерческому сайту?
Закон № 8-ФЗ и постановление № 102 адресованы органам власти и подведомственным им организациям. Коммерческая компания в этот круг не входит, и прямой обязанности завести версию для слабовидящих эти акты ей не дают.
ГОСТ Р 52872-2019, на который ссылается постановление, сам по себе обязательным не становится. По статье 26 Федерального закона № 162-ФЗ «О стандартизации» документы национальной системы стандартизации применяются на добровольной основе, если иное не установлено законодательством. Для госсайтов «иное» установлено постановлением, для частного сайта — нет.
Отдельный случай — студия или подрядчик, который делает сайт для госоргана или учреждения. Требования применяются к сайту заказчика, поэтому их стоит включить в техническое задание и в приёмку с самого начала.
Честная граница: если у вас лендинг для узкой аудитории и нет ресурса на доработку, ставить скрипт с переключателем ради галочки бессмысленно. Он не сделает сайт доступным и может сломать вёрстку. Лучше потратить те же силы на контраст, масштаб и подписи к полям форм.
Что требует постановление № 102
Постановление перечисляет параметры, которым должен соответствовать официальный сайт. Многие из них совпадают с привычными критериями WCAG:
| Параметр | Что требует постановление | Что это значит на практике |
|---|---|---|
| Клавиатура | информация доступна с клавиатуры без ограничений по времени нажатия клавиш | все меню, формы и кнопки работают клавишей Tab и Enter |
| Масштаб | текст масштабируется не менее чем на 200 % без потери функциональности и горизонтальной прокрутки | при увеличении в браузере вёрстка перестраивается, а не уезжает вбок |
| Документы | читаются программами экранного доступа | PDF размечен или рядом есть доступная версия |
| Картинки и видео | у нетекстового контента есть текстовая версия | заполнен alt у изображений, у видео есть описание |
| Ссылки | цель ссылки понятна из текста или контекста | вместо «подробнее» — «условия доставки» |
| Контраст | не менее 4,5:1, для укрупнённого текста не менее 3:1 | серый текст на белом фоне проверяют контрастомером |
| Мигание | нет элементов, которые вызывают дискомфорт, например более 3 вспышек в секунду | автослайдеры и анимация останавливаются |
| Формы | у всех полей есть текстовые описания, ошибки поясняются текстом | подпись над полем, а не только серый плейсхолдер |
| Шрифт | читаемый шрифт без декоративных элементов | рукописные и узкие начертания — только для заголовков-акцентов |
Отдельная версия или доступный сайт: что выбрать
Постановление № 102 говорит о параметрах официального сайта, а не о переключателе: государственные органы, органы местного самоуправления и подведомственные им организации должны обеспечить соответствие своих официальных сайтов перечисленным параметрам. Отдельная «версия для слабовидящих» эти параметры не заменяет: если основной сайт не работает с клавиатуры, крупный шрифт в альтернативном режиме этого не исправит.
На практике рабочая схема такая. Основной сайт делают доступным по параметрам постановления или WCAG. Переключатель режима оставляют как дополнительное удобство для тех, кому нужен очень крупный шрифт или особая цветовая схема, — но не как способ закрыть требования.
Готовые скрипты, которые за минуту добавляют кнопку с глазом, решают только внешнюю часть. Подписи к картинкам, порядок заголовков, описания полей форм и доступность документов скрипт за вас не напишет — их закладывают в шаблоны сайта.
Мнение. Если сайт всё равно ждёт обновление, закладывайте доступность в новый шаблон, а не прикручивайте её скриптом к старому. Переделка готовой вёрстки под клавиатуру и программы экранного доступа обычно дороже, чем правильная вёрстка с нуля.
WCAG 2.2 и ГОСТ Р 52872-2019: на что опираться
Для техники есть два ориентира. ГОСТ Р 52872-2019 — российский национальный стандарт требований доступности интернет-ресурсов для людей с инвалидностью; на него ссылается постановление № 102. WCAG 2.2 — международное руководство консорциума W3C по доступности веб-контента, на котором построены многие национальные стандарты.
WCAG делит критерии на три уровня соответствия: A — нижний, AA и AAA — высший. Ориентиром для большинства сайтов служит уровень AA. В нём, например, контраст текста не ниже 4.5:1, увеличение текста до 200 процентов без потери контента и отображение страницы без двумерной прокрутки на ширине 320 CSS-пикселей.
В версии 2.2 появились критерии, которые полезно знать при вёрстке. Цель для нажатия указателем должна быть не меньше 24 на 24 CSS-пикселя или иметь достаточный отступ от соседних. А элемент, получивший фокус с клавиатуры, не должен полностью скрываться контентом самого сайта — например, «липкой» шапкой или баннером cookie.
Многие критерии совпадают с требованиями к удобной мобильной версии сайта: крупные кнопки, перестроение вёрстки при увеличении, отсутствие горизонтальной прокрутки. Адаптивный сайт уже наполовину доступен.
Как сделать сайт доступным для слабовидящих
Доступность проще заложить на этапе дизайна и вёрстки, чем добавлять потом. Порядок работ:
Если сайт устарел и доступность в нём не закладывали, это хороший повод для редизайна: правильные шаблоны решают большую часть задач сразу на всех страницах. Контраст, масштабирование и работу с клавиатуры мы закладываем в шаблоны, когда делаем адаптивный сайт, — так каждая новая страница получает их без ручной доработки.
Как проверить, доступен ли сайт слабовидящим?
Базовую проверку можно провести без специальных навыков, за один проход по ключевым страницам:
- Тест клавиатурой — уберите мышь и пройдите по странице клавишей Tab: видно ли, где фокус, открывается ли меню, отправляется ли форма.
- Масштаб 200 % — увеличьте страницу в браузере: текст не должен обрезаться, а вёрстка — уезжать за правый край.
- Контраст — проверьте основные пары цветов любым онлайн-калькулятором контраста по формуле WCAG.
- Программа экранного доступа — включите встроенную в систему программу чтения с экрана и послушайте, как звучат меню, кнопки и форма.
- Картинки без загрузки — отключите изображения и посмотрите, остался ли смысл страницы.
Такая проверка не заменяет аудит по всем пунктам постановления или WCAG, но находит самые грубые проблемы. Для госсайта по итогам стоит пройти все параметры постановления № 102 по списку.
Частые ошибки с версией для слабовидящих
Большинство ошибок связано с тем, что доступность путают с переключателем. Вот что встречается чаще всего:
- 01 Только кнопка с глазом
Основной сайт не работает с клавиатуры и программами экранного доступа, требования не выполнены.
- 02 Скрипт поверх старой вёрстки
Режим ломает блоки, и в «версии для слабовидящих» сайтом пользоваться сложнее, чем без неё.
- 03 Плейсхолдер вместо подписи
Серый текст в поле исчезает при вводе, а программа экранного доступа его часто не читает.
- 04 Иконки без названий
Кнопки «поиск», «корзина» и «меню» озвучиваются как «кнопка» без пояснения.
- 05 Сканы документов
PDF-картинка не читается вспомогательными технологиями.
- 06 Фокус под «липкой» шапкой
Человек с клавиатурой теряет место на странице.
Источники
- Постановление Правительства РФ № 102 о требованиях к доступности для инвалидов по зрению официальных сайтов — Гарант
- Статья 10 Федерального закона № 8-ФЗ «Об обеспечении доступа к информации о деятельности государственных органов и органов местного самоуправления» — Гарант
- Статья 26 Федерального закона № 162-ФЗ «О стандартизации в Российской Федерации» — Гарант
- Приказ Рособрнадзора № 1493 «Об утверждении Требований к структуре официального сайта образовательной организации» — Гарант
- Web Content Accessibility Guidelines (WCAG) 2.2 — W3C