Стандарт доступності вмісту WAI-WCAG 1.0

Про необхідність впровадження стандартів доступності сервісів і вмісту йдеться в підсумковій резолюції РИФ-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) Надайте текстовий еквівалент для всіх нетекстових елементів, у тому числі для img, map, applet, object, frame, script, звукових і відео-файлів.

Мабуть, це найбільш важлива вимога. Якщо на сайті немає звуків і відео, потрібно переконатися, що у всіх малюнків є атрибут alt, що описує вміст малюнка. Якщо малюнок являє собою діаграму, яку неможливо описати в атрибуті alt, необхідно використовувати атрибут longdesc, значення якого являє собою посилання на окрему сторінку, що описує малюнок. Зазначимо, що атрибут alt є обов'язковим для тега img, тому на його відсутність вкаже html-валідатор. Тим не менш, валідатор задовольниться і порожнім значенням атрибута alt, що може будь порушенням стандарту WCAG. При наявності значної кількості відео або звуків, дана рекомендація значно вплине на процес розміщення нових матеріалів.

• 2 (пріоритет 1) Надайте альтернативні посилання на кожну активну область на серверній карті зображень.
• 3 (пріоритет 1) Поки браузери не навчаться вимовляти текстовий еквівалент візуального ряду, надайте аудіо-еквівалент візуального ряду або мультимедіа презентації.
• 4 (пріоритет 1) Синхронізуйте текстовий або аудіо-еквівалент з відео за часом. У разі, якщо використовуваний формат відео не підтримує субтитри, зробіть 2 варіанти відео - з субтитрами і без.
• 5 (пріоритет 3) Поки браузери не навчаться відображати текстові еквіваленти областей на клієнтській карті зображень, надайте дублюючі посилання на кожну активну область.

Гайдлайн 2. Не покладайтеся тільки на колір.

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

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

• 1 (пріоритет 2) Якщо існує відповідний засіб розмітки, використовуйте його, а не зображення для передачі інформації.
• 2 (пріоритет 2) Створюйте документи, що задовольняють формальні вимоги до формату (наприклад, включайте до початку документа посилання на DTD для простої перевірки коректності формату документа).
• 3 (пріоритет 2) Використовуйте стильові сторінки.

Щоб дотримуватися правил 3.2 і 3.3, слід регулярно перевіряти сторінки сайту на відповідність стандартам HTML і CSS, наприклад, за допомогою валідаторів, що надаються w3c.

• 4 (пріоритет 2) Використовуйте відносні, а не абсолютні величини в CSS-атрибутах. Наприклад, використовуйте em або значення у відсотках замість pt або cm. Якщо ви використовуєте абсолютні одиниці, проведіть детальне тестування вмісту в різних середовищах користувача.

Даному правилу, мабуть, досить складно слідувати. На багатьох сайтах рунету параметри вказані в пікселях або в pt. Необхідна перевірка в різних оточеннях повинна включати тестування в звукових браузерах і людьми з обмеженими можливостями.

• 5 (пріоритет 2) Використовуйте заголовки для оформлення структури документа.
• 6 (пріоритет 2) Коректно оформляйте списки елементів (наприклад, за допомогою тегів ol, ul і dl).
• 7 (пріоритет 2) Коректно оформляйте цитати. Не використовуйте елементи q і blockquote для вигляду тексту, який не є цитатою.

Гайдлайн 4. Коректно декларуйте мову тексту.

• 1 (пріоритет 1) Вкажіть зміни мови в тексті (наприклад, у HTML використовуйте атрибут lang, xml xml:lang). Якщо документ містить частини тексту іншими мовами, явне визначення мови дозволить звуковому браузеру переключитися на іншу мову при читанні даних фрагментів.

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

• 2 (пріоритет 3) Наводьте розгорнутий еквівалент кожної абревіатури при першому вживанні в тексті (в HTML використовуйте атрибут title для елементів abbr і acronym).
• 3 (пріоритет 3) Оголошуйте основну мову документа (у HTML за допомогою атрибута lang теґу html, XHTML за допомогою атрибута xml:lang).

Гайдлайн 5. Створіть доступні таблиці.

• 1 (пріоритет 1) Виберіть заголовки рядків і стовпчиків у таблицях з даними (у html - елементи.)
• 2 (пріоритет 1) Для таблиць, що мають два або більше рівня заголовків, використовуйте елементи розмітки, щоб асоціювати заголовки з вмістом (thead, tfoot, tbody для зв'язку рядків, col, colgroup - для зв'язку стовпчиків, атрибути axis, scope і headers для опису більш складних взаємозв'язків).
• 3 (пріоритет 2) Не випрользуйте таблиці, якщо таблиця не має сенсу в лінеаризованому вигляді або надайте альтернативне уявлення таким таблицям.
• 4 (пріоритет 2) Всередині таблиць не використовуйте структурні елементи розмітки для цілей візуального форматування (наприклад, не використовуйте вказівник для вибору комірки, яка не є заголовком).
• 5 (пріоритет 3) Задавайте резюме таблиці за допомогою атрибута summary.
• 6 (пріоритет 3) Задавайте скорочені заголовки таблиці (атрибут abbr тега tr). Такі заголовки можуть бути корисними, щоб уникнути повторів довгого заголовка під час послідовного зачитування всіх комірок таблиці.

Гайдлайн 6. Переконайтеся, що сторінки можуть використовувати нові технології.

• 1 (пріоритет 1) Переконайтеся, що документ можна прочитати при вимкнених сторінках стилю.

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

• 2 (пріоритет 1) Переконайтеся, що еквівалент динамічного вмісту оновлюється під час оновлення динамічного контенту.

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

• 3 (пріоритет 1) Переконайтеся, що сторінки можна використовувати при вимкнених скриптах, апплетах або інших програмних елементах.
• 4 (пріоритет 2) Переконайтеся, що обробники подій у скриптах і апплетах не залежать від пристрою вводу. Використовуйте події рівня програми, такі як onfocus, onblur, onselect. Обробники подій, що залежать від пристрою використовуйте парно: onmousedown разом з onkeydown, onmounseup разом з onkeyup, onclick разом з onkeypress.
• 5 (пріоритет 2) Переконайтеся, що динамічний вміст доступний в різних клієнтських середовищах або надайте альтернативне уявлення сторінки. Наприклад, у багатьох випадках серверні скрипти забезпечують більш високу доступність, ніж клієнтські скрипти.

Гайдлайн 7. Дайте користувачеві контроль над змінами сторінки, що відбуваються за таймером.

• 1 (пріоритет 1) Уникайте швидкого мерехтіння екрану поки браузери не навчаться фільтрувати мерехтіння (людям з фоточутливою епілепсією протипоказано дивитися на спалахи з частотою від 4 до 59 Гц).
• 2 (пріоритет 2) Уникайте мерехтіння вмісту (поки браузери не навчаться фільтрувати мерехтіння).
• 3 (пріоритет 2) Не розміщуйте рухомий вміст на сторінках (поки браузери не навчаться зупиняти рух). При необхідності використання руху, надайте простий механізм відключення руху на сторінці.
• 4 (пріоритет 2) Не створюйте сторінок з автоматичним періодичним оновленням сторінки (поки браузери не навчаться блокувати auto-refresh).
• 5 (пріоритет 2) Поки браузери не навчаться блокувати клієнтський редирект, не використовуйте його автоматично. Використовуйте серверний редирект.

Гайдлайни 8-14 читайте в повній версії статті про WCAG на webew.ru.