Международный стандарт доступности веб-контента WCAG 2.0 и рекомендации по разработке качественных веб-сайтов государственных учреждений с учетом требований доступности для инвалидов
Новичков Д.Ю.

Аннотация

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

Ключевые слова

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

О WCAG 2.0

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

Руководство было составлено экспертами из разных стран в области интернет-технологий (дизайнерами, html-кодерами, программистами и т.д.), участниками Всемирного веб-консорциума (www.w3c.org) в 2008 году.

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

Руководство состоит из 61 проверяемого утверждения, которые объединены 12 положениями, отражающими 4 основополагающих принципа доступного контента: Воспринимаемость, Управляемость, Понятность, Совместимость. То есть, доступный контент должен быть воспринимаемым, управляемым, понятным, совместимым. Сами эти слова в отрыве от контекста звучат странно и даже не по-русски. Обоснованием может служить новизна материала и самой области знаний под названием «доступность веб-контента». Руководство было написано в 2008 году, и хотя его первая версия увидела свет еще в прошлом веке, в далеком 1998 г., в новой версии кардинально был пересмотрен подход к рассмотрению вопросов технической доступности веб-контента. В частности, за 10 лет бурного развития интернет-технологий, эксперты поняли, что за технологиями не угнаться, а потому описывать особенности их применения с точки зрения доступности, как это было сделано в WCAG 1.0, бессмысленно. Сегодня опишем, а завтра вся технология будет считаться морально устаревшей, и никто ее уже не будет использовать, но появится новая, до конца не изученная, а потому сложно поддающаяся стандартизации.

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

О доступности

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

О контенте

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

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

О человеческих способностях

С одной стороны – тут все понятно. Мы все примерно представляем свои человеческие способности. Трудности начинаются, когда мы думаем про способности другого человека, потому что в этот момент мы обычно опять представляем свои человеческие способности, совершая критическую ошибку, потому что все люди разные. Не все пользователи обладают одинаковыми способностями, в противном случае Руководства по обеспечению доступности веб-контента не потребовалось бы.

Об ограниченных способностях по здоровью

Среди пользователей интернета, есть такие, которые «особеннее» других, ради которых вся эта история с доступностью и затевалась.

Незрячие пользователи

Вопреки расхожему мнению, среди незрячих много пользователей интернета (только в России по оценкам экспертов их около 12 тысяч). Их особенность лишь в том, что они не видят картинок. Все остальное они «видят» при помощи специального программного обеспечения, которое зачитывает вслух весь контент страниц, или при помощи так называемого Брайлевского дисплея, который отображает шрифтом Брайля все содержимое сайта. То есть, для незрячих доступно все содержимое в текстовом или аудио виде.

Слабовидящие пользователи

Экран компьютера – не бумага. Он менее контрастный, с него сложнее читать, глаза быстрее устают, снижается работоспособность. Чем менее удобочитаемо сверстан текст, тем хуже. Чем больше отвлекающих, ярких, движущихся элементов – тем сложнее работать в интернете слабовидящим пользователям. К ним относятся все, кто уже носит очки или линзы, кто сделал операцию по коррекции зрения, а также все те, кому за 30, возраст, когда начинаются необратимые процессы старения. Полагаю, большинство читателей впервые посмотрели сейчас на себя, как на людей с ограниченными возможностями. Ничего, это только начало.

Слабослышащие и глухие

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

Пользователи с нарушениями двигательных функций

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

Возрастные ограничения

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

Психические особенности и особенности восприятия

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

Культурные и языковые особенности

Пока что это еще не совсем наша реальность, однако все больше в России появляется людей, у которых русский язык не родной. Например, в США многие сайты имеют отдельные испаноязычные версии. В странах, где официальных языков больше, чем один, некоторые сайты, например, госучереждений, просто обязаны быть представленными на двух (или даже трех) официальных языках.

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

Сколько их?

Именно разработчики чаще всего задают вопрос: «А сколько их, людей с ограничениями?», пытаясь выяснить, а стоит ли увеличивать объем своих работ по приведению веб-контента в доступный для всех формат. Давайте посчитаем. Берем 10% россиян с официальной инвалидностью, прибавляем тех, кто в очках и линзах, тех, кому за тридцать, тех, кто с медленным интернетом (хотя это и техническое, но, все же, ограничение), тех, кто с маленькими экранами мобильных телефонов (эксперты говорят, что через несколько лет мобильник станет первым и единственным средством для выхода в интернет для многих миллионов новых пользователей), прибавляем пожилых пользователей, прибавляем начинающих или вовсе еще не начавших, но которые обязательно рано или поздно выйдут в интернет... Никого не забыл? Кажется, уже набралось 150 миллионов? То есть по большому счету – все пользователи реально или потенциально являются пользователями с ограничениями.

Памятка

Как сделать веб-контент доступным (по мотивам Руководства по обеспечению доступности веб-контента 2.0)? (Данная памятка носит информационный характер и не может быть использована в качестве руководства для улучшения доступности контента веб-сайтов. Официальную информацию о том, как сделать контент доступным вы можете найти в последней англоязычной версии Руководства по обеспечению доступности Web-контента [WCAG] 2.0 по адресу в интернете http://www.w3.org/TR/WCAG20/ или в неофициальном переводе этого документа на русский язык по адресу http://accessibility.ru/docs/WCAG20Russian031109.html).

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

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

Однако:

• если это элемент управления или поле для ввода информации, то у него должно быть название, которое просто и понятно описывает его назначение;
• если это аудио или видеофайл, то у него должно быть, как минимум, краткое текстовое описание;
• если это тест или упражнение, и смысл его теряется, если его представить в виде текста, то должно быть, как минимум, краткое описание этого теста;
• если этот контент предназначен для передачи некоего специфического сенсорного восприятия, например, исполнение соло на флейте или показ образцов искусства, то, как минимум, должно быть краткое текстовое описание этого контента;
• если контент является лишь декоративным элементом, украшением, визуальным форматированием или вовсе невидим для пользователей, то он должен быть представлен таким образом, чтобы программное обеспечение, которым пользуются, например, незрячие пользователи (которое зачитывает все текстовое содержимое сайта вслух), могло игнорировать его;
• если этот контент является тестом CAPTCHA (произносится как [капча]) для различения пользователей и роботов (обычно представлен в виде замутненной картинки, с которой нужно считать буквы или цифры и ввести их в текстовое поле при регистрации), то необходимо предоставить ее текстовое описание, а также альтернативную форму CAPTCHA, которая использует разные виды вывода информации, доступные для других видов восприятия, для пользователей с различными ограничениями, например аудио-CAPTCHA.
  
• На момент подготовки статьи группа незрячих пользователей готовит письмо к Президенту РФ с просьбой помочь им быть услышанными компанией WebMoney, ведущей в России системой электронных платежей, а также всеми системами электронных банков, услуги которых совершенно недоступны для них по причине непреодолимого для незрячих пользователей теста CAPTCHA.

Положение 1.2. Альтернативные версии для видео и аудио контента.

Аудиоконтент в записи: предоставьте пользователям альтернативную эквивалентную версию для всего аудиоконтента. Видеоконтент в записи: предоставьте пользователям альтернативную эквивалентную версию для всего видеоконтента. Титры (в записи): предоставьте титры для всего аудиоконтента в записи и, если возможно, в режиме реального времени. Предоставьте альтернативную версию для всего медиаконтента или аудиоописание для видеоконтента. Предоставьте сурдоперевод для всего аудиоконтента, или медиаконтента с аудиорядом. Предоставьте расширенное аудиоописание для всего видеоконтента.

Положение 1.3. Адаптируемость: создавайте контент, который может быть представлен в различных видах без потери информации или структуры (например, в более простом дизайне страницы).

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

Положение 1.4. Различие: упростите пользователям просмотр и прослушивание контента, отделив важные его части от второстепенных.

Цвет: не используйте цвет в качестве единственного визуального средства передачи информации, обозначения действия, запроса на обратную связь или выделения визуального элемента. Звуки и аудиофон: не используйте автоматически проигрываемые звуковые файлы на сайте. Если все же на сайте автоматически проигрывается аудиозапись продолжительностью более 3 секунд, предоставьте доступную возможность остановить и выключить эту аудиозапись, или убавить громкость аудиозаписи независимым от управления громкостью системы способом. Контраст: сделайте текст и изображение текста не менее чем в 4,5 раза контрастнее, чем фон, на котором они изображены. Для увеличенного текста коэффициент контрастности составляет не менее 3:1. Для второстепенного текста (текста или его изображения, являющихся частью неактивных компонентов интерфейса, которые выполняют только декоративную функцию, или которые не видны пользователям, или являются частью изображения, имеющего более значительный контент) требований к коэффициенту контрастности не имеется. Логотипы, в которых имеется текст или его изображение, не имеют особых требований по контрастности. Изменение размеров текста: сделайте возможным изменение размера шрифта текста пользователями в пределах до 200% без использования вспомогательных технологий и без потери контента или функциональности (исключая титры и изображения текста). В логотипах, где текст является частью логотипа или названия торговой марки, использование изображения текста допустимо. Визуальное оформление контента: текстовый контент должен иметь следующие визуальные характеристики:

Пользователь может выбрать цвета переднего плана и фона.

Ширина строки не превышает 80 символов.

Текст не выровнен по ширине строки (одновременно по правому и левому полям).

Межстрочный интервал внутри абзаца не менее 1.5, а интервал между абзацами больше межстрочного минимум в 1.5 раза.

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

Принцип 2. Управляемость. Все компоненты пользовательского интерфейса и навигации должны быть управляемыми

Положение 2.1. Доступность управления с клавиатуры: предоставьте возможность управления всей функциональностью с клавиатуры.

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

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

Настройка ограничения по времени: Для всякого ограничения времени, предложите пользователю:

• возможность выключить ограничение по времени до того, как оно истечет; или
• возможность настроить ограничение по времени до того, как оно истечет, с возможностью увеличения временного лимита, минимум, в 10 раз;
• или
• дополнительное время: минимум за 20 секунд пользователь должен получить уведомление о том, что время истекает и его можно продлить простым действием (например, «нажмите на клавишу пробел»).

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

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

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

Положение 2.3. Не используйте заведомо опасные элементы дизайна.

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

Положение 2.4. Навигация: предоставьте пользователям помощь и поддержку в навигации, поиске контента и определении их текущего положения на сайте.

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

Принцип 3. Понятность. Информация и операции пользовательского интерфейса должны быть понятными

Положение 3.1. Удобочитаемость: сделайте весь текстовый контент удобочитаемым и понятным.

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

Положение 3.2. Предсказуемость: web-страницы должны отображаться и вести себя предсказуемым образом.

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

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

Выявление ошибок: если ошибки ввода выявляются автоматически, то ошибочный элемент идентифицируется и ошибка описывается пользователю в текстовом виде. Ярлыки или инструкции: когда от пользователя требуется ввод информации, пользователю должны быть доступны ярлыки и инструкции. Подсказки при ошибках: если ошибка ввода выявлена автоматически и доступны подсказки по ее исправлению, то они предоставляются пользователю. Предупреждение ошибок (юридических, финансовых, ошибок ввода данных): Для web-страниц, на которых фиксируются юридические обязательства, проводятся финансовые транзакции, меняются или стираются контролируемые пользователем данные в системах хранения данных или c которых отправляются результаты тестирования пользователя, необходимо предоставить одно из следующего списка:

обратимость: отправленные данные можно вернуть;

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

подтверждение: доступен механизм для проверки, подтверждения и исправления информации перед отправкой данных.

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

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

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

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

______________________________

Новичков Даниэль Юрьевич - автор проекта www.internetbezbarierov.ru, переводчик Руководства по обеспечению доступности веб-контента 2.0, консультант по доступности веб-контента и удобству использования интерфейсов

---

&copy Информационное общество, 2010, вып. 1, с. 66-72.