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

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

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

Строго говоря, требования к сайтам для слабовидящих прописаны в ГОСТ Р 52872-2012 "Интернет-ресурсы. Требования доступности для инвалидов по зрению". Помимо ГОСТа, существуют также международные требования: Web Content Accessibility Guidelines (WCAG 2.0.) - от W3C, Section 508 Standards – США, WaSP – Великобритания, DAL – Дания. Но мы сосредоточимся именно на требованиях российского ГОСТ - потому что прокурорские проверки сайтов опираются именно на него, и невыполнение этих требований чревато большой нервотрепкой для веб-разработчиков.

ГОСТ Р 52872-2012 определяет 3 уровня доступности для инвалидов по зрению: А - минимальная доступность, АА - полная доступность, ААА - доступность специализированных сайтов для инвалидов по зрению. Приведем все основные требования к уровню ААА, как наиболее распространенному. А потом разберемся с главными.

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

  • Информация должна быть представлена в виде текста, в том числе - к изображениям, гиперссылкам и элементам форм обязан прилагаться поясняющий содержание текст (например, в ALT и longdesc, или под изображением). Изображения можно отключить (кроме логотипа).
  • Капча (если она используется) обязана иметь аудио-версию.
  • Файлы PDF должны использоваться ограниченно, как недоступные для многих инвалидов по зрению (как допустимый вариант - иметь функцию увеличения размера)
  • Таблицы не должны иметь много уровней вложенности.
  • Фреймы полностью запрещены.
  • Часто посещаемые страницы не должны иметь объем больше 2-3 экранов.
  • Размер шрифта должен масштабироваться до 200% без вспомогательных средств и без появления полосы горизонтальной прокрутки в режиме полного экрана.
  • Медиа-контент, ограниченный по времени (например, слайдер) должен иметь поясняющие надписи к каждому элементу контента.
  • Адаптируемый дизайн - например, более простая верстка и дизайн.
  • Значимая последовательность контента (никаких вставок постороннего контента внутри главного контента).
  • Цвет не используется в качестве единственного визуального средства передачи информации и выделения элемента.
  • Коэффициент контрастности - не менее 7:1. Для увеличенного текста - не менее 4,5:1.
  • Требования к форматированию: цвета переднего плана и фона могут быть выбраны пользователем, ширина строки не превышает 80 символов, текст НЕ выровнен по ширине строки, межстрочный интервал внутри абзаца не менее 1,5, интервал между абзацами не менее чем в 1,5 раза больше межстрочного.
  • Любое действие пользователя на сайте можно осуществить с помощью одной клавиатуры, причем без ограничений по времени нажатия на клавишу.
  • Навигация или хлебные крошки дают возможность пользователю в любой момент времени определить, в какой части сайта он находится - в рамках единообразной навигации.
  • Язык сайта должен быть программно определен.
  • Программные средства экранного доступа для слабовидящих корректно работают на сайте. К ним относятся Jaws for Windows, MAGic, ONYX camera, NVDA, дисплей Брайля.

Итак, что с этим всем делать разработчикам?

Вычленяем главное

Сами разработчики ГОСТа упоминают, что исполнить все до единого требования практически невозможно. Поэтому мы рекомендуем в качестве эталонного образца минимальной функциональности использовать версию для слабовидящих сайта Президента РФ http://special.kremlin.ru - ни один чиновник в России не посмеет требовать большего, чем есть на этом сайте.

Мы видим, что помимо обычных коррекций в CSS разработчикам следует учитывать необходимость специального функционала только по 3 направлениям:

  • 1. Изменение размера шрифта, типа шрифта, межбуквенного интервала
  • 2. Изменение цветовой схемы сайта
  • 3. Включение /отключение изображений

Стандартными средствами во многих CMS сделать это не удастся. Потребуется либо подключение специальных плагинов и модулей (для Drupal их просто нет), либо подключение специально написанных js для аякс-переключения CSS. Сложность заключается в том, что ГОСТ требует вариативности - то есть нельзя сделать некую «единую» версию сайта для слабовидящих, а необходимо обеспечить пользователю варианты по каждому из 3 направлений.

Общие рекомендации к программному решению версии для слабовидящих

1. Разумно дизайн основного сайта оставить как есть, а все требования к версии для слабовидящих реализовать на отдельной упрощенной теме, где 30 вариантов CSS (к примеру) не займут так уж много строк кода, и не будут тормозить загрузку основного сайта.

2. Версию для слабовидящих оптимально реализовать на одноколоночной теме. Упрощенное текстовое меню сверху, а через skip-link - переход к основному содержанию страницы.

3. Требования к изменению размера шрифтов, интервалов и типам шрифтов изложены выше. Следует обратить внимание только на главное требование - 200% увеличения размера и контрастность. Цветовых схем рекомендуется сделать минимум три - черно-белая, бело-черная и любая другая (стандартно - темно-синим по голубому).

4. Отключение и включение картинок легко решается через CSS (можно и вовсе во всех цветовых схемах убрать img в hidden). Главное - не забыть убрать все фоновые картинки из стилей.

Известные готовые решения

  • CMS Joomla! - модули Template Selector и Fast Font
  • CMS Wordpress - плагины Comfortable Reading или For the visually impaired
  • CMS Drupal - готового решения нет. Рекомендуется подобно minjust.ru использовать модуль switchtheme и «допиливать» тему для слабовидящих самостоятельно при помощи CSS и js.
  • В системе школьных сайтов edusite.ru - модуль имеется по умолчанию.
  • В системе Ukoz имеется плагин «Версия сайта для слабовидящих»
  • CMS Bitrix имеет модуль для слабовидящих в редакции «Официальный сайт государственной организации»

Вы можете ЗАКАЗАТЬ версию для слабовидящих у нас! Посмотрите, как этот сайт выглядит в версии для слабовидящих (баннер внизу).