Використання WAI ролі ARIA Landmark - оновлений

Для ARIA віхою на підтримку читання з екрану см.: відбивні HTML5 Доступність: ARIA віхою підтримки [1]

WAI-ARIA Ролі Landmark

Специфікація WAI ARIA [2] визначає набір спеціалізованих "віхою" ролі. Ці функції забезпечують метод, щоб програмно визначити часто зустрічаються ділянки вміст веб-сторінки на постійній основі. вони можуть бути використані в даний час в будь-який смак (X) HTML ви віддаєте перевагу. Це дозволяє допоміжними технологіями, щоб надати користувачам функції, які вони можуть використовувати для виявлення і перейдіть до розділів змісту сторінки.

Інформація про WAI - ARIA орієнтирів від WAI-ARIA Best Practices (редактори "Проект 6 серпня 2010)

Орієнтири величезне поліпшення в порівнянні з рудиментарними "перейти до основного змісту", який використовується до WAI-ARIA. Якщо можливо, краще використовувати їх як орієнтири.
...

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

Є також основні вигоди від надання навігаційних орієнтирів. Ваш браузер може призначити послідовність клавіш для переміщення фокусу на цих ділянках, оскільки вони можуть бути встановлені на кожному сайті. Навігація цих орієнтирів є апаратно-незалежним. Персональний цифровий помічник (PDA) можуть призначити клавішу пристрою, щоб отримати до них в документі.

Як використовувати віхою ролі

Це безболісний процес, щоб додати орієнтир ролі існуючих (і нових) сторінок. Просто додайте роль атрибута елемента контейнера, використовуючи найбільш підходяще значення ролі для змісту контейнера, наприклад:

 <div class="content" role="main">

Додавання Landmark ролей WordPress

Я додав їх у блозі TPG (використовує WordPress) приблизно за 20 хвилин, він бере участь у редагуванні наступних файлів WordPress: sidebar.php (додані додаткові, навігація (x2) і пошук пам'яток), header.php (розміщений банер орієнтир), single.php (додано основний орієнтир), footer.php (додано ContentInfo орієнтир) і index.php (додано основний орієнтир). Отримані результати можуть бути візуалізовані використанням Соковиті Студія доступність панелі [4] документа пам'ятки особливість:

ТПГ сторінці блогу з банером, основні, додаткові, пошуку і навігації віхою роль використання візуалізується.

Підтримка Landmark ролі

Орієнтир роль в даний час підтримується в версії JAWS 10 для читання з екрану [5], NVDA 2010,1 [6] і VoiceOver [7] на iPhone iOS4.

Примітка: Поточна версія Window читання з екрану очима є помилки [8], пов'язані з використанням ВСС.

Орієнтир поведінка підтримка в JAWS версії 10 і вище

В JAWS версії 10 і вище, визначне навігації клавіатура у віртуальному режимі:

  • Наступною віхою, (коми)
  • попередній орієнтир SHIFT +; (крапка з комою)
  • Список пам'яток CTRL + INS +; (крапка з комою)

Коли велосипеді через орієнтири допомогою коми ключ, орієнтир ім'я ролі + "орієнтир" оголошення. Користувач може потім курсором (стрілка вниз) на утримання. Якщо пам'яткою є контейнером для інших орієнтирів він не входить в цикл порядку, але включений в список порядку. За умовчанням в списку не відображаються вкладені пам'ятки, але, коли вкладений контейнер елемента віхою отримує фокус, він оголосив, що користувач у списку пункт закрито, інформує користувача про те, що елемент має підпункти. Потім користувач може використовувати клавішу зі стрілкою вправо, щоб відкрити під списком.

Віхою елемента додаткового змістуВіхою

ARIA Тести Landmark роль

Детальна інформація про поточні допоміжних підтримкою технології можна знайти в супровідному документі ARIA Тести Landmark роль [9] .

Що можна сказати про нову Секціонування елементів в HTML5

Новий секціонування елементів HTML5 є деякі збіги з ролі ARIA пам'ятка, але в більшості випадків не існує еквіваленту для орієнтиру ARIA ролі в HTML5. Передбачається, що там, де схожість ARIA ролі можуть бути використані для забезпечення семантичної ідентифікації, яка має практичне застосування в даний час, наприклад, якщо ви хочете використовувати HTML5 навігаційні елемента, додати роль = "навігація" до нього, так підтримкою Допоміжні Technology (AT) може передати семантичну інформацію для користувачів. Коли HTML5 елементів, таких як навігаційні підтримується AT, ви можете видалити роль, як це вже не буде потреби.

  <nav role="navigation">
  

Як приклад використання HTML5 елементів і ролі ARIA віхою поглянути на код сайту Брюса Лоусона [10] .

Порівняння ARIA віхою ролі та HTML5 структурних елементів

ARIA Landmark роль HTML5 Секціонування елемент
role="application" Представляє область сторінки, що представляють собою унікальні одиниці програмного забезпечення виконання безлічі завдань для своїх користувачів. Це та область, де допоміжні технології також повинні повернутися переглядати навігаційні клавіші назад до веб-додатків в цій галузі. Примітка: Якщо всі веб-сторінки грає роль додатка, то воно не повинно розглядатися як навігаційний орієнтир на допоміжні технології. Немає еквівалента HTML5 елементів.
Рекомендується використовувати на семантично нейтральний елемент, наприклад, div.
role="banner" область, яка містить прем'єр-заголовка або внутрішніх назву сторінки. Велика частина змісту банера є сайт-орієнтованої, а не конкретні сторінки. Сайт-орієнтоване зміст зазвичай включає в себе такі речі, як логотип сайту спонсора, основний заголовок на сторінці, і сайт-специфічні засоби пошуку. Як правило, це відображається у верхній частині сторінки охоплює всю ширину. Примітка: У будь документ або додаток, автору слід відзначити не більше одного елемента з баннера роль . Немає еквівалента HTML5 елементів.
Рекомендується використовувати на одному заголовку елемента на сторінці, якщо заголовок елемента використовується, як описано в ролі = "банер".
role="complementary" підтримку частини документа, яка залишається значущою навіть тоді, коли відокремлений від основного content.There різні типи контенту, які належним цю роль. Наприклад, у разі портал, це може включати, але не бути обмеженим, щоб показати час, поточна погода, статей, або акції, щоб спостерігати. Зміст повинен мати відношення до основного змісту, якщо він повністю сепарабельному, більш загальний роль повинна використовуватися замість цього. <aside> aside елемент представляє розділ сторінки, який складається з контенту, непряме відношення до змісту всього в сторону елемента, і які можуть розглядатися окремо від змісту. Такі ділянки часто представлені у вигляді врізки в друкованій друкарні.
role="contentinfo" метадані, які застосовуються наприклад document.For батька, примітки, авторські права, а також посилання на заяви буде належати тут. Примітка: У будь документ або додаток, автор слід відзначити не більше одного елемента з ContentInfo роль . Немає еквівалента HTML5 елементів. Рекомендується використовувати на одному footer елемента на сторінці, якщо підвал використовується елемент, як описано в ролі = "ContentInfo".
role="form" область документа, який представляє собою сукупність форм-асоційованих елементів, деякі з яких можуть представляти редаговані значення, які можуть бути передані на сервер для обробки. form елемент являє собою сукупність форм-асоційованих елементів, деякі з яких можуть представляти редаговані значення, які можуть бути представлені на сервер для обробки.
role="main" Основний зміст документа. Це знаменує собою зміст, яке безпосередньо пов'язане з або розширюється на центральною темою документа. В будь-який документ або додаток, автор повинен відзначити не більше одного елемента з основної ролі. Примітка: У будь документ або додаток, автору слід відзначити не більше одного елемента з основної ролі. Немає еквівалента HTML5 елементів.
Рекомендується використовувати на семантично нейтральний елемент, наприклад, div.
role="navigation" Колекція навігаційних елементів (як правило, посилання) для навігації по документу або пов'язаних з ним документів. nav елементів представляє розділ сторінки, посилання на інші сторінки або в частині на сторінці: розділ навігаційних посилань.
role="search" засіб пошуку веб-документа. Як правило, це форма використовується для відправки пошукових запитів про сайт або в більш загальному служби пошуку в Інтернеті. Немає еквівалента HTML5 елементів.
Рекомендується використовувати на семантично нейтральний елемент, наприклад, div або на form елемента, якщо форма містить тільки шукати пов'язані елементи управління та інструкцій.