• Для полноценного доступа инвалидов по зрению к интернет ресурсам, информация на сайте должна быть представлена в виде текста;
• Все изображения необходимо сопровождать комментариями;
• Таблицы должны иметь степень вложенности не более трех;
• Таблицы должна иметь не более 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 достаточны для создания самых разнообразных визуальных эффектов.