Домашня » Кодування » Погляд у веб-стандарти ARIA та доступність додатків HTML

    Погляд у веб-стандарти ARIA та доступність додатків HTML

    По-справжньому відкрита та інклюзивна мережа потребує технологій, які дозволяють користувачам з обмеженими можливостями спиратися на допоміжні технології, щоб користуватися динамічним веб-вмістом та сучасними веб-програмами. Стандарти веб-сайтів W3C, спрямовані на доступність веб-сайтів, спрямовані на заповнення Інтернету доступними доступними Інтернет-додатками (ARIA), які користувачі з обмеженими можливостями можуть ефективно використовувати.

    ARIA є одним з численних стандартів доступності та керівних принципів, опублікованих Інтитуативним веб-доступністю (WAI). Він надає додаткову розмітку, яку можна легко вставити в HTML-документи. WAI-ARIA - це крос-платформне рішення для перехресних пристроїв, націлене на відкриту веб-платформу, тому не думайте лише про веб-сайти, а також про ігри, цифрові розваги, охорону здоров'я, мобільні та інші види програм.

    У цьому пості ми розглянемо, як ви можете додати доступ до документів HTML за допомогою стандартів WAI-ARIA.

    Рамка ARIA

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

    Саме в цей момент ARIA приходить на нашу допомогу, оскільки вона дозволяє визначити призначення різних елементів за допомогою важливі ролі, і описувати їх природу атрибути з префіксом арії. Атрибути з префіксом арії мають два типи: властивості які описують функції, які менш ймовірно змінюватимуться протягом всього життєвого циклу сторінки, і держав які надають інформацію про речі, які часто можуть змінюватися через взаємодію з користувачем.

    Орієнтир Ролі

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

    Є 8 типів орієнтирних ролей ARIA, і вони повинні бути додані як атрибути до пов'язаних тегів HTML.

    роль =”банер”

    Роль банера призначена для використання в основному для вмісту, який стосується всього сайту, а не лише окремих сторінок. Зазвичай це додано як атрибут до головного заголовка сайту для логотипу та іншої важливої ​​для всього сайту інформації. Важливо, щоб ви могли використовувати роль банера лише один раз у будь-яких документах або програмах HTML.

    роль =”main”

    Основна знакова роль пов'язана з основним змістом документа. Його не можна використовувати більше одного разу на будь-якій сторінці HTML. Зазвичай вона слідує за

    синтаксис, або в HTML5 тим більше семантичний
    . Останній був доданий до специфікації W3C з метою відображення main ARIA роль орієнтира семантичний елемент HTML.

    роль =”навігація”

    Роль навігації призначена для вказівки області, яка містить навігаційні елементи, такі як посилання та списки на сайті.

    роль =”додаткові”

    Додаткова роль орієнтира описує додатковий вміст, який пов'язаний з основним змістом сайту. Вона повинна бути розміщена на подібному рівні в ієрархії DOM, як role = "main". Пов'язані повідомлення, популярні статті, останні коментарі є типовими прикладами автономного додаткового контенту.

    роль =”contentinfo”

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

    роль =”формі”

    Роль орієнтира форми вказує на форму, що очікує введення користувача. Для пошукових форм ви повинні використовувати role = "search" замість цього.

    роль =”пошук”

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

    роль =”програми”

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

    IMAGE: Ресурси доступності Sky.com

    Стани та властивості

    Хоча ролі дозволяють визначити значення тегів HTML, стани та властивості надають користувачеві додаткову інформацію про те, як взаємодіяти з ними. І стани, і властивості позначені символом атрибути з префіксом арії з синтаксисом aria- *.

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

    Синтаксис атрибутів з префіксом арії

    Стани та властивості іноді приймають значення маркера (обмежений набір попередньо визначених значень), наприклад, властивість aria-live може мати 3 різних значення: вимкнено, ввічливий, напористою. Синтаксис у цьому прикладі виглядає так:

    .

    В інших випадках значення атрибутів з префіксом арії представлені струни, номери, цілі числа, ID посилання або true / false значення.

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

    1. Збірка відносин між елементами з атрибутами відносин

    Використовуйте атрибути відносин для позначення взаємозв'язків між різними елементами на вашому сайті, які не можуть бути визначені з структури документа. Наприклад aria-labelledby властивість ідентифікує елемент, який мітить поточний елемент.

    aria-labelledby - серед багатьох інших речей - можуть прив'язувати заголовки до регіональних регіонів ARIA таким чином:

    Це заголовок

    Основний вміст ...

    2. Синхронізуйте держави та властивості з життєвим циклом елемента

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

    3. Знайдіть візуальний і доступний інтерфейси

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

    Посібник W3C з авторських практик WAI-ARIA може надати вам багато інших чудових ідей щодо того, як правильно гармонізувати візуальні та доступні інтерфейси вашого сайту.

    Не зловживайте ARIA

    Використання ролей і атрибутів ARIA іноді може бути зайвим. При використанні семантичних тегів HTML5, таких як або

    , Сучасні веб-браузери за замовчуванням додають відповідну семантику ARIA. У цьому випадку немає сенсу окремо встановлювати орієнтирні ролі ARIA.

    Наприклад, використовувати непотрібно формі Роль орієнтирів для визначення

    елемент. Замість
    синтаксис цілком достатньо для використання
    . Також зайвим є використання власних атрибутів HTML разом з відповідним атрибутом ARIA.

    Отже, якщо ви вже додали приховано Атрибут HTML до вводу форми, не потрібно додавати арія прихована стан, як браузер включає його за замовчуванням.

    © Savtec
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.