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

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

На данный момент огромное количество государственных учреждений России получило предписание, что их сайты должны содержать версии их сайтов для слабовидящих, которые бы удовлетворяли ГОСТу Р 52872-2012.

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

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

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

Версия сайта для слабовидящих будет соответствовать ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению», также будет обеспечена совместимость версии с программами экранного доступа.

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

По данным ВОЗ (Всемирная организация здравоохранения), в мире насчитывается более 40 миллионов слепых и более 250 миллионов людей с плохим зрением. Кроме слепых есть еще категория дальтоников (цветовая слепота), их число варьируется от 4 до 8 процентов населения, при этом процент дальтоников среди женщин ниже – менее 1%.

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

ГОСТы

Применение этих технологий регулируется всего одним документом – ГОСТ Р 52872-2007 «Интернет-ресурсы. Требования доступности для инвалидов по зрению». Основные положения:

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

Международным стандартом является документ консорциума W3 Web Content Accessibility Guidelines (WCAG) 2.0 (Руководство по доступности веб-контента).
Основные положения документа заключаются в том, что пользователь должен иметь возможность:

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

Теперь подробно о каждом из этих требований к форме представления текста.

Воспринимаемость.

• Контраст — не менее 4.5:1;
• Размер шрифта может быть увеличен в 2 и более раз, при сохранении функциональности и без появления горизонтальной прокрутки;
• Возможность выбора цвета текста и фона;
• Ширина текстового блока не должна превышать 80 знаков;
• Выравнивание текста по ширине блока или окна не допускается;
• Междустрочный интервал полуторный или выше, расстояние между параграфами в полтора раза больше, чем интервал между строками.

Операбельность.

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

Ясность.

• Содержимое сайта должно быть понятным и читаемым;
• Определения редких слов, сокращений, необычных словосочетаний, аббревиатур и т.п. должны быть приведены в тексте или на полях;
• Веб-страницы должны «вести» себя предсказуемо;
• Помощь пользователю при вводе данных: проверка на ошибки, подсказки, контекстная помощь, инструкции по заполнению полей.

Надежность.

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

Как пользователи с ослабленным зрением пользуются интернетом.

Полностью слепые пользователи используют специальные программы (скрин-ридеры), которые синтезируют речь, эти программы анализируют html-разметку и отсеивают то, что нужно прочитать, а что нет. Другой способ чтения связан с использованием дисплея Брайля, который состоит из программы-ридера и устройства, на корпусе которого расположены рельефно-точечные ячейки.

У пользователей с ослабленным зрением есть несколько вариантов:

• веб-браузер + специальная программа, увеличивающая часть экрана
• программные средства масштабирования окна браузера
• дополнительные возможности самого веб-сайта, которые предусмотрены разработчиками при создании или модернизации сайта по программе «Доступная среда».
• текстовый браузер – это браузер, который отображает только текстовое содержание веб-сайта.

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

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

Цвета

Цветовое кодирование позволяет улучшить восприятие информации любыми пользователями. Для примера: кнопка «ОК» может быть зеленой, а кнопка «ОТМЕНИТЬ» — красной. Пользователю можно предложить выбирать цвета для различных задач: очень удобно, когда на экране появляются цветные квадратики с текстом или изображением, которые можно нажать. Это гораздо лучше, чем выпадающее меню.

Однако цвета – это не единственный способ улучшить восприятие информации. На красной кнопке (квадратике) должен быть соответствующий текст – «Удалить». Еще один вариант: выделение поля красным бордюром, если оно неправильно заполнено. Цветового кодирования в этом случае недостаточно: необходимо указать неправильные поля и сообщить пользователю, в чем конкретно ошибка (не хватает цифр в телефонном номере, адрес электронной почты не соответствует формату).

Аудио-контент.

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

От фонового звука желательно совсем отказаться или сделать его отключаемым и тихим.

Текст

• Основной текст должен быть контрастным
• Должна быть возможность увеличить текст на 200%, при этом страница должна остаться читаемой
• Без необходимости не стоит выводить текст в виде картинки
• При верстке необходимо соблюдать правила типографики для веб-страниц: ширина строки должна быть не более 80 символов, текст не выравнивается по краям, межстрочный интервал не должен быть большим и существенно меньше интервала между абзацами.

Все функции должны быть доступны с клавиатуры.

Преимущества мыши известны, однако бывает, что клавиатуру использовать удобнее: стрелки «вниз» в полях ввода или выпадающих списках, Tab, Enter, CTRL-Ins/CTRL-Delete и т.д.

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

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

У пользователя должно быть достаточно времени для ознакомления с контентом.

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

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

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

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

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

Страницы сайта должны быть просты в навигации и пользователь должен иметь возможность сориентироваться – где он находится.

Эти требования естественны и для обычных сайтов:

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

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

Текст должен быть читаемым и понятным.

• Язык страницы необходимо определить в HTML-коде. Если на странице есть текст на другом языке, то необходимо использовать атрибут xml:lang, который определяет язык.
• Если в тексте есть редкие слова, специфические значения слов, аббревиатуры, рекомендуется там же пояснить их смысл.
• Специализированный контент (с формулами, научными и отраслевыми терминами), который ориентирован не только на профессионалов, но и для более широкой аудитории, рекомендуется дополнить альтернативным упрощенным по смыслу вариантом.

Веб-страницы должны быть предсказуемыми

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

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

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

Сообщения типа: «ERROR №747», «Ошибка: переполнение очереди», «Форма заполнена некорректно» — признак непрофессионализма разработчиков. Сообщения об ошибках должны быть понятны обычным пользователям.

Стандартные поля для ввода должны быть интуитично понятными и привычными для аудитории, на которую рассчитаны:

• поле со звездочкой — обязательное,
• дата в России в формате «дд.мм.гггг»,
• поле без подписи после поля «пароль» — это повтор пароля,
• поле рядом с кривыми цифрами — это капча.

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

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

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

Следует избегать не стандартные средства для разработки пользовательских интерфейсов: невидимый слой, который появляется при активации элемента; пиктограммы с изображением включенных/выключенных кружков вместо радибаттона, изображение с onclick-ом вместо кнопки сабмита. Возможности HTML/CSS достаточны  для создания самых разнообразных визуальных эффектов.

Заключение

В статье приведены основные принципы обеспечения доступности контента. В России числится более 13 миллионов людей с ограниченными возможностями, это больше 10%  населения страны. Это вполне серьезная аудитория, интересы которой стоит учитывать при разработке сайтов и приложений.

Буквально следовать всем требованиям Руководства действительно сложно, однако придерживаться основных принципов вполне реально.