Мы уже писали про стандарт доступности содержимого WAI-WCAG, поддерживаемый W3C. В настоящей статье рассмотрим требования стандарта более подробно. В процессе описания требований, мы постараемся привести webew.ru в соответствии с ними, что сделает сайт более доступным для пользователей и позволит сайту участвовать в престижном конкурсе рунета «WebHiTech».

Цель стандарта WAI-WCAG (Web Content Accessibility Guidelines) — сделать содержимое веб-сайта более доступным для всех пользователей, независимо от типа ипользуемого браузера (традиционный браузер, голосовой браузер, мобильный телефон и др.), в том числе для пользователей с ограниченными физическими возможностями. Стандарт описан в виде гайдлайнов, содержащих перечень контрольных точек, разделенных на три группы по приоритету:

• Приоритет 1. Сайт обязан следовать этим положениям, иначе некоторые пользователи не смогут получить доступ к содержимому сайта.
• Приоритет 2. Сайт должен следовать этим положениям, иначе некоторые пользователи испытают существенные затруднения при доступе к содержимому сайта.
• Приоритет 3. Желательно, чтобы сайт следовал этим положениям, иначе некоторые пользователи испытают некоторые затруднения при доступе к содержимому сайта.

Трем группам приоритета соответствуют три уровня соответствия стандарту:

• Уровень A: выполнены все требования, имеющие приоритет 1.
• Уровень "две A": выполнены все требования, имеющие приоритет 1 или 2.
• Уровень "три A": выполнены все требования, имеющие приоритет 1, 2 или 3.

Гайдлайн 1. Предоставляйте альтернативы звуковому и визуальному содержимому.

• 1.1 (приоритет 1) Предоставляйте текстовый эквивалент для всех нетекстовых элементов, в том числе для img, map, applet, object, frame, script, звуковых и видео-файлов.

Пожалуй, это наиболее важное требование. На webew в настоящее время нет звуков и видео, поэтому требуется убедиться, что у всех рисунков есть атрибут alt, описывающий содержимое рисунка. Если рисунок представляет собой диаграмму, которую невозможно описать в атрибуте alt, необходимо использовать атрибут longdesc, значение которого представляет собой ссылку на отдельную страницу, описывающую рисунок. Отметим, что атрибут alt является обязательным для тега img, поэтому на его отсутствие укажет html-валидатор. Тем не менее, валидатор удовлетворится и пустым значением атрибута alt, что может будь нарушением стандарта WCAG.

• 1.2 (приоритет 1) Предоставляйте альтернативные ссылки на каждую активную область на серверной карте изображений.
• 1.3 (приоритет 1) Пока браузеры не научатся произносить текстовый эквивалент визуального ряда, предоставляйте аудио-эквивалент визуального ряда или мультимедиа презентации.
• 1.4 (приоритет 1) Синхронизуйте текстовый или аудио-эквивалент с видео по времени. В случае, если используемый формат видео не поддерживает субтитры, сделайте 2 варианта видео — с субтитрами и без.
• 1.5 (приоритет 3) Пока браузеры не научатся отображать текстовые эквиваленты областей на клиентской карте изображений, предоставляйте дублирующие ссылки на каждую активную область.

Гайдлайн 2. Не полагайтесь только на цвет.

• 2.1 (приоритет 1) Убедитесь, что вся информация переданная с помощью цвета, также доступна без цветов, например, в форме текста или разметки.
• 2.2 (приоритет 2 для рисунков, приоритет 3 для текста) Убедитесь, что цвета переднего плана и фона достаточно контрастны при просмотре на черно-белом мониторе, а также людьми с ограниченным цветовым восприятием.

Гайдлайн 3. Правильно используйте разметку и страницы стилей.

• 3.1 (приоритет 2) Если существует подходящее средство разметки, используйте его, а не изображение для передачи информации.
• 3.2 (приоритет 2) Создавайте документы, удовлетворяющие формальным требованиям к формату (например, включайте в начало документа ссылку на DTD для простой проверки корректности формата документа).
• 3.3 (приоритет 2) Используйте стилевые страницы.

Чтобы следовать правилам 3.2 и 3.3, следует регулярно проверять страницы сайта на соответствие стандартам HTML и CSS, например, с помощью валидаторов, предоставляемых w3c. На webew ссылки на валидаторы, размещены вниз каждой страницы для удобства регулярной проверки.

• 3.4 (приоритет 2) Используйте относительные, а не абсолютные величины в CSS-атрибутах. Например, используйте em или значения в процентах вместо pt или cm. Если использованы абсолютные единицы, проводите детальное тестирование содержимого в различных пользовательских окружениях.

Данному правилу, пожалуй, достаточно сложно следовать. На webew многие параметры заданы в пикселях и в pt. Требуемая проверка в различных окружениях должна включать тестирование в звуковых браузерах и людьми с ограниченными возможностями. Пока данный вопрос не решен, webew нельзя назвать соответствующим стандарту на уровне AA.

• 3.5 (приоритет 2) Используйте заголовки для оформления структуры документа.
• 3.6 (приоритет 2) Корректно оформляйте списки элементов (например, с помощью тегов ol, ul и dl).
• 3.7 (приоритет 2) Корректно оформляйте цитаты. Не используйте элементы q и blockquote для оформления текста, не являющегося цитатой.

На webew.ru следует определить в CSS стили для q и blockquote, чтобы авторы содержимого могли использовать данные элементы.

Гайдлайн 4. Корректно декларируйте язык текста.

• 4.1 (приоритет 1) Отмечайте изменение языка в тексте (например, в HTML используйте атрибут lang, в XML — xml:lang). Если документ содержит части текста на других языках, явное указание языка позволит звуковому браузеру переключиться на другой язык при чтении данных фрагментов.

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

• 4.2 (приоритет 3) Приводите разврернутый эквивалент каждой абревиатуры при первом употреблении в тексте (в HTML используйте атрибут title для элементов abbr и acronym).
• 4.3 (приоритет 3) Объявляйте основной язык документа.

Для соответствия требованию 4.3, на webew элементу html добавлен атрибут xml:lang='ru-RU'

Гайдлайн 5. Создавайте доступные таблицы.

• 5.1 (приоритет 1) Выделяйте заголовки строк и столбцов в таблицах с данными (в html - элементы th).
• 5.2 (приоритет 1) Для таблиц, имеющих два или более уровня заголовков, используйте элементы разметки, чтобы ассоциировать заголовки с содержимым (thead, tfoot, tbody для связи строк, col, colgroup - для связи столбцов, атрибуты axis, scope и headers для описания более сложных взаимосвязей).
• 5.3 (приоритет 2) Не испрользуйте таблицы, если таблица не имеет смысла в линеаризованном виде или предоставляйте альтернативное представление таким таблицам.
• 5.4 (приоритет 2) Внутри таблиц не используйте структурные элементы разметки для целей визуального форматирования (например, не используйте th для выделения ячейки, не являющейся заголовком).
• 5.5 (приоритет 3) Задавайте резюме таблицы с помощью атрибута summary.
• 5.6 (приоритет 3) Задавайте сокращенные заголовки таблицы (атрибут abbr тега tr). Такие заголовки могут быть полезны, чтобы избежать повторов длинного заголовка при последовательном зачитывании всех ячеек таблицы.

Гайдлайн 6. Убедитесь в доступности страниц, использующих новые технологии.

• 6.1 (приоритет 1) Убедитесь, что документ может быть прочитан при отключенных стилевых страницах.

Для того, чтобы протестировать пункт 6.1, мы использовали текстовый браузер lynx, входящий в большинство дистрибутивов Linux (windows-версии также доступны). Выглядит вполне читаемо, см. скриншот.

• 6.2 (приоритет 1) Убедитесь, что эквивалент динамического содержимого обновляется при обновлении динамического контента.

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

• 6.3 (приоритет 1) Убедитесь, что страницы можно использовать при выключенных скриптах, апплетах или других программных элементах.
• 6.4 (приоритет 2) Убедитесь, что обработчики событий в скриптах и апплетах не зависят от устройства ввода. Cтарайтесь использовать события уровня приложения, такие как onfocus, onblur, onselect. Обработчики событий, зависящие от устройства используйте парно: onmousedown вместе с onkeydown, onmounseup вместе с onkeyup, onclick вместе с onkeypress.
• 6.5 (приоритет 2) Убедитесь, что динамическое содержание доступно в различных клиентских средах или предоставьте альтернативное представление страницы. Например, во многих случаях, серверные скрипты обеспечивают более высокую доступность, чем клиентские скрипты.

Гайдлайн 7. Дайте пользователю контроль над изменениями страницы, происходящими по таймеру.

• 7.1 (приоритет 1) Избегайте быстрого мерцания экрана пока браузеры не научатся фильтровать мерцание (людям с фоточувствительной эпилепсией противопоказано смотреть на вспышки с частотой от 4 до 59 Гц).
• 7.2 (приоритет 2) Избегайте мерцания содержимого (пока браузеры не научатся фильтровать мерцание).
• 7.3 (приоритет 2) Не размещайте движущееся содержимое на страницах (пока браузеры не научатся останавливать движение). При необходимости использования движения, предоставляйте простой механизм отключения движения на странице.
• 7.4 (приоритет 2) Не создавайте страниц с автоматическим периодическим обновлением страницы (пока браузеры не научатся блокировать auto-refresh).
• 7.5 (приоритет 2) Пока браузеры не научатся блокировать клиентский редирект, не используйте его автоматически. Используйте серверный редирект.

Гайдлайн 8. Убедитесь в доступности пользовательского интерфейса.

• 8.1 (приоритет 1) Сделайте программные элементы доступными для спецбраузеров (см. также гайдлайн 6). Приоритет 1, если элементы являются важными и не имеют альтернативы, приоритет 2 в противном случае.

Гайдлайн 9. Проектируйте интерфейс, не зависящий от клиентских устройств.

• 9.1 (приоритет 1) Используйте клиентские карты изображений, а не серверные, за исключением случая невозможности геометрического задания областей.
• 9.2 (приоритет 2) Каждый элемент, имеющий собственный интерфейс должен быть доступен с различных устройств (см. гайдлайн 8).
• 9.3 (приоритет 2) В скриптах задавайте обработчики логических событий, а не событий, зависящих от устройства ввода (см. гайдлайн 6.4).
• 9.4 (приоритет 3) Задавайте порядок табуляции для ссылок, объектов и управляющих элементов. См. статью про tabindex.
• 9.5 (приоритет 3) Задавайте горячие клавиши для важных ссылок и управляющих элементов.

Гайдлайн 10. Используйте временные решения для совместимости со старыми браузерами.

• 10.1 (приоритет 2) Избегайте использования всплывающих окон или открывания ссылки в новом окне, не предупредив пользователя (пока браузеры не научатся блокировать открывание новых окон).
• 10.2 (приоритет 2) Пока браузеры не будут корректно отображать явные связи между текстовыми метками и полями ввода, помещайте текстовые метки прямо перед соответствующими им полями ввода в коде страницы.
• 10.3 (приоритет 3) Давайте альтернативное представление для всех таблиц, которые теряют смысл, будучи прочитаны последовательно (ячейка за ячейкой).
• 10.4 (приоритет 3) Пока браузеры не будут корректно обрабатывать пустые элементы ввода (INPUT, TEXTAREA), наполняйте элементы ввода заполнителям (некоторые старые браузеры не позволяют пользователю попасть в поле ввода, не содержащее текста).
• 10.5 (приоритет 3) Пока браузеры (включая спецбраузеры) не будут корректно обрабатывать смежные ссылки, помещайте читаемые символы между соседними ссылками.

Учитывая, что стандарт разработан в 1999 году, большинство требований совместимости устарели. Вторая версия стандарта WAI-WCAG, находящаяся сейчас в черновом варианте будет включать актуальные на сегодня рекомендации совместимости.

Гайдлайн 11. Следуйте стандартам W3C.

• 11.1 (приоритет 2) Используйте технологии W3C, если они применимы к поставленной задаче. Используйте последние поддерживаемые версии стандартов.
• 11.2 (приоритет 2) Избегайте использования устаревших возможностей технологий W3C.
• 11.3 (приоритет 3) Предоставляйте информацию для того, чтобы пользователь мог выбрать удобный ему формат содержимого (язык, тип содержимого и.т.д.). Например, методом переговоров о типе содержимого (content-negotiation), предусмотренным протоколом HTTP.
• 11.4 (приоритет 1) Если не удалось создать доступную страницу, предоставьте ссылку на страницу с эквивалентным содержимым, написанную в соответствии со стандартами W3C.

Гайдлайн 12. Предоставляйте информацию о контексте.

• 12.1 (приоритет 1) Давайте заголовок каждому фрейму.
• 12.2 (приоритет 2) Описывайте назначение каждого фрейма, если заголовок не может вместить достаточного описания (используйте свойство longdesc).
• 12.3 (приоритет 2) Разделяйте большие блоки информации на легко воспринимаемые куски. Используйте заголовки различного уровня, элементы optgroup, fieldset и др.
• 12.4 (приоритет 2) Явно ассоциируйте текстовые метки с соответствующими им элементами управления (например, с помощью атрибута for элемента label).

Гайдлайн 13. Создавайте ясные механизмы навигации.

• 13.1 (приоритет 2) Текст ссылки должен ясно описывать страницу назначения.
• 13.2 (приоритет 2) Предоставляйте метаданные. Например, используйте RDF для указания автора, типа содержимого и др. Задавайте связи документов с помощью элемента link.
• 13.3 (приоритет 2) Поддерживайте информацию об общей структуре сайта, например, в форме оглавления или карты сайта.
• 13.4 (приоритет 2) Поддерживайте удобную навигацию на сайте.
• 13.5 (приоритет 3) Создайте панель навигации со ссылками на доступные навигационные механизмы.
• 13.6 (приоритет 3) Группируйте связанные ссылки и предоставляйте пользователь возможность скрыть группу ссылок.
• 13.7 (приоритет 3) Если на сайте доступен поиск, предложите несколько типов поиска для пользователей с разным уровнем подготовки и с разными предпочтениями.
• 13.8 (приоритет 3) Помещайте различающуюся информацию в начало заголовков, параграфов, списков.

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

• 13.9 (приоритет 3) Предоставляйте информацию о коллекциях документов (например, с помощью элемента link или, поместив коллекцию в общий заархивированный файл).
• 13.10 (приоритет 3) Предоставляйте возможность пропустить многострочные ASCII-рисунки.

Гайдлайн 14. Убедитесь, что документы простые и ясные.

• 14.1 (приоритет 1) Используйте наиболее простой из возможных стилей языка для изложения содержимого.
• 14.2 (приоритет 3) Дополните текст иллюстрациями или звуковым файлами для упрощения восприятия материала.
• 14.3 (приоритет 3) Используйте единый визуальный стиль для всех страниц сайта.

Выводы

Требования стандарта WAI-WCAG регламентируют различные этапы жизни сайта — от проектирования, дизайна и разработки до управления содержимым и поддержки сайта. Соответствие стандарту требует непрерывного контроля за корректностью публикуемых материалов со стороны авторов, редакторов и контент-менеджеров. Сегодня мы можем говорить о совместимости webew.ru со стандартом WAI-WCAG на уровне "A". Для достижения следующих ступеней соответствия потребуется дальнейшая работа. Будем рады комментариям читателей.