Доступная среда — сайты для слабовидящих

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

По данным ВОЗ (Всемирная организация здравоохранения), в мире насчитывается более 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%  населения страны. Это вполне серьезная аудитория, интересы которой стоит учитывать при разработке сайтов и приложений.

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

Скрыть
Перезвоним Вам в течении 30 минут!

...ну в рабочее время разумеется =)