Погляд у веб-стандарти ARIA та доступність додатків HTML
По-справжньому відкрита та інклюзивна мережа потребує технологій, які дозволяють користувачам з обмеженими можливостями спиратися на допоміжні технології, щоб користуватися динамічним веб-вмістом та сучасними веб-програмами. Стандарти веб-сайтів W3C, спрямовані на доступність веб-сайтів, спрямовані на заповнення Інтернету доступними доступними Інтернет-додатками (ARIA), які користувачі з обмеженими можливостями можуть ефективно використовувати.
ARIA є одним з численних стандартів доступності та керівних принципів, опублікованих Інтитуативним веб-доступністю (WAI). Він надає додаткову розмітку, яку можна легко вставити в HTML-документи. WAI-ARIA - це крос-платформне рішення для перехресних пристроїв, націлене на відкриту веб-платформу, тому не думайте лише про веб-сайти, а також про ігри, цифрові розваги, охорону здоров'я, мобільні та інші види програм.
У цьому пості ми розглянемо, як ви можете додати доступ до документів HTML за допомогою стандартів WAI-ARIA.
Рамка ARIA
Синтаксис HTML не завжди дозволяє розробникам правильно описувати елементи, визначати їхні ролі та визначати відносини між ними. Хоча це рідко є проблемою для відвідувачів, які повністю володіють своїми відчуттями, це може завадити користувачам допоміжних технологій розуміння того, що відбувається на екрані, і вивчення їх варіантів.
Саме в цей момент ARIA приходить на нашу допомогу, оскільки вона дозволяє визначити призначення різних елементів за допомогою важливі ролі, і описувати їх природу атрибути з префіксом арії. Атрибути з префіксом арії мають два типи: властивості які описують функції, які менш ймовірно змінюватимуться протягом всього життєвого циклу сторінки, і держав які надають інформацію про речі, які часто можуть змінюватися через взаємодію з користувачем.
Орієнтир Ролі
Ролі орієнтира є найбільш відомими формами моделі ролей ARIA (інші - абстрактні ролі, ролі віджетів і ролі структури документів). Ролі орієнтирів дозволяють розробникам ідентифікувати великі сприймаються регіонами на веб-сторінці, щоб користувачі допоміжних технологій могли швидко отримати доступ.
Є 8 типів орієнтирних ролей ARIA, і вони повинні бути додані як атрибути до пов'язаних тегів HTML.
роль =”банер”
Роль банера призначена для використання в основному для вмісту, який стосується всього сайту, а не лише окремих сторінок. Зазвичай це додано як атрибут до головного заголовка сайту для логотипу та іншої важливої для всього сайту інформації. Важливо, щоб ви могли використовувати роль банера лише один раз у будь-яких документах або програмах HTML.
роль =”main”
Основна знакова роль пов'язана з основним змістом документа. Його не можна використовувати більше одного разу на будь-якій сторінці HTML. Зазвичай вона слідує за Роль навігації призначена для вказівки області, яка містить навігаційні елементи, такі як посилання та списки на сайті. Додаткова роль орієнтира описує додатковий вміст, який пов'язаний з основним змістом сайту. Вона повинна бути розміщена на подібному рівні в ієрархії DOM, як Роль contentinfo повідомляє користувачам про наявність регіону, де можна знайти різні види метаданих, наприклад, інформацію про авторські права, юридичні документи та заяви про конфіденційність. Зазвичай використовується для колонтитулу сайту. Роль орієнтира форми вказує на форму, що очікує введення користувача. Для пошукових форм ви повинні використовувати Роль пошуку досить очевидна, вона покликана допомогти допоміжним технологіям визначити функцію пошуку веб-сайту. Можна використовувати роль орієнтира програми для регіону, який потрібно оголосити як веб-додаток, а не як веб-документ. Не рекомендується включати його в традиційні веб-сайти, оскільки він натякає на допоміжні технології для переходу від звичайного режиму перегляду до режиму перегляду додатків. Ви повинні використовувати цю важливу роль лише з великою обережністю. Хоча ролі дозволяють визначити значення тегів HTML, стани та властивості надають користувачеві додаткову інформацію про те, як взаємодіяти з ними. І стани, і властивості позначені символом атрибути з префіксом арії з синтаксисом aria- *. Найбільш відомі атрибути ARIA - це, мабуть, властивість, необхідна для арії, і стан, що перевіряється арією. Арія необхідна a власності тому що це постійна особливість елемента вводу (тобто користувач повинен заповнити його), тоді як перевірена арія - a стан тому що прапорець часто може змінювати його значення через взаємодію з користувачем. Стани та властивості іноді приймають значення маркера (обмежений набір попередньо визначених значень), наприклад, властивість aria-live може мати 3 різних значення: вимкнено, ввічливий, напористою. Синтаксис у цьому прикладі виглядає так: В інших випадках значення атрибутів з префіксом арії представлені струни, номери, цілі числа, ID посилання або true / false значення. Використовуйте атрибути відносин для позначення взаємозв'язків між різними елементами на вашому сайті, які не можуть бути визначені з структури документа. Наприклад Після того, як ви встановите роль орієнтира ARIA для сприйманої області на вашій HTML-сторінці, вона може допомогти допоміжним технологіям багато, якщо змінити стани та властивості дочірніх елементів ARIA відповідно до подій, що відбуваються на екрані. Це може мати вирішальне значення, коли користувачі повинні взаємодіяти з сайтом, наприклад заповнити форму або виконати пошуковий запит. Загальне правило дизайну доступності полягає в тому, що поточний стан інтерфейсу користувача завжди має бути сприйманим допоміжними технологіями. Наприклад, якщо користувач вибирає опцію у формі, він також повинен бути вибраним для допоміжних технологій. Це можна легко досягти, використовуючи стан, вибраний з арії, з наступним синтаксисом: Посібник W3C з авторських практик WAI-ARIA може надати вам багато інших чудових ідей щодо того, як правильно гармонізувати візуальні та доступні інтерфейси вашого сайту. Використання ролей і атрибутів ARIA іноді може бути зайвим. При використанні семантичних тегів HTML5, таких як Наприклад, використовувати непотрібно формі Роль орієнтирів для визначення Отже, якщо ви вже додали приховано Атрибут HTML до вводу форми, не потрібно додавати арія прихована стан, як браузер включає його за замовчуванням.. Останній був доданий до специфікації W3C з метою відображення main ARIA роль орієнтира семантичний елемент HTML. роль =”навігація”
роль =”додаткові”
role = "main". Пов'язані повідомлення, популярні статті, останні коментарі є типовими прикладами автономного додаткового контенту.роль =”contentinfo”
роль =”формі”
role = "search" замість цього.роль =”пошук”
роль =”програми”
Стани та властивості
Синтаксис атрибутів з префіксом арії
Як використовувати ARIA і властивості
1. Збірка відносин між елементами з атрибутами відносин
aria-labelledby властивість ідентифікує елемент, який мітить поточний елемент.aria-labelledby - серед багатьох інших речей - можуть прив'язувати заголовки до регіональних регіонів ARIA таким чином:Це заголовок
Основний вміст ... 2. Синхронізуйте держави та властивості з життєвим циклом елемента
3. Знайдіть візуальний і доступний інтерфейси
.Не зловживайте ARIA
або , Сучасні веб-браузери за замовчуванням додають відповідну семантику ARIA. У цьому випадку немає сенсу окремо встановлювати орієнтирні ролі ARIA. елемент. Замість синтаксис цілком достатньо для використання . Також зайвим є використання власних атрибутів HTML разом з відповідним атрибутом ARIA.
