Pull to refresh

Стандарт доступности содержимого WAI-WCAG 1.0

Reading time 6 min
Views 7.9K
О необходимости внедрения стандартов доступности сервисов и содержимого говорится в итоговой резолюции РИФ-2008, а в мировой практике такие стандарты существуют и используются более 10 лет. Следование рекомендациям по доступности содержимого WAI-WCAG (Web Accessibility Initiative Web Content Accessibility Guidelines) является одним из требований конкурса WebHiTech. В настоящей статье постараюсь перечислить рекомендации стандарта.

WCAG 1.0 — стандарт, описывающий общие правила оформления страниц в интернете разработан в 1999 году подразделением WAI группы W3C. Цель стандарта — сделать содержимое интернета доступным всем пользователям, в том числе пользователям с ограниченными возможностями (например, лишенные зрения пользователи используют для работы в интернет специальные программы, зачитывающие содержимое сайтов). Стандарт описан в виде гайдлайнов, содержащих перечень контрольных точек, разделенных на три группы по приоритету:

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


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


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


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

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

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

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


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

Рекомендацию 4.1 следует учитывать, например, на туристических или языковых сайтах, содержащих фрагменты на других языках.
  • 4.2 (приоритет 3) Приводите разврернутый эквивалент каждой абревиатуры при первом употреблении в тексте (в HTML используйте атрибут title для элементов abbr и acronym).
  • 4.3 (приоритет 3) Объявляйте основной язык документа (в HTML с помощью атрибута lang тега html, в XHTML с помощью атрибута xml:lang).

Гайдлайн 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-14 читайте в полной версии статьи о WCAG на webew.ru.
Tags:
Hubs:
+15
Comments 7
Comments Comments 7

Articles