Що таке ARIA та які основні принципи ARIA?

20.11.2019
What is ARIA
Автор:

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

Ми вже писали про розділ 508 та тестування веб-сайту на доступність. Сьогодні команда InternetDevels пояснює, що таке ARIA та як атрибути ARIA можуть зробити ваш веб-сайт більш доступним.

Що таке веб доступність?

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

Перегляньте цей посібник з веб доступності 2020.

Що таке ARIA?

ARIA розшифровується як Accessible Rich Internet Applications. ARIA — це набір спецільних атрибутів, опублікованих W3C, які можна додати до елементів HTML, щоб зробити веб-сторінки та програми більш доступними для людей з обмеженими можливостями. Ці атрибути не додають функціональних можливостей. Вони надають додаткові описи для допоміжних технологій (AT), таких як зчитувачі екранів.

Основні функції ARIA

Атрибути ARIA включають такі компоненти: Roles, States та Properties.

Roles

Ролі визначають тип елемента інтерфейсу користувача. Ролі додаються через атрибут role = "<ROLE TYPE>". Після встановлення роль не змінюється.

Ролі ARIA:

  • landmark
  • widget
  • document
  • abstract

Landmark ARIA roles

Ролі landmark полегшують навігацію, розбиваючи сторінку на різні розділи, наприклад search, banner, navigation, application, тощо. Таким чином, зчитувач екрану здатний оголосити про початок і кінець кожної важливої ​​ролі, що допомагає людям з обмеженими можливостями визначати різні частини веб-сторінки.

Widget ARIA roles

Ролі widget використовуються для додання смислового значення елементам інтерфейсу користувача, наприклад link, button, checkbox та ін. За допомогою атрибутів widget люди, які використовують AT, можуть взаємодіяти з веб-сторінкою. Наприклад, вони можуть відкривати та закривати вкладки, заповнювати форми, тощо.

Document ARIA roles

Ролі document містять описи структур, які організовують вміст на сторінці, наприклад img, list, row, toolbar, тощо.

Abstract ARIA roles

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

States and Properties

Стани (aria-grab, aria-disabled, aria-checked, тощо) та властивості (aria-label, aria-haspopup, aria-control, тощо) підтримують ролі ARIA. Стани можуть змінюватися самостійно або на основі взаємодії з користувачем, тоді як властивості зазвичай не змінюються після встановлення.

Категорії станів та властивостей:

  1. Widget Attributes
  2. Live Region Attributes
  3. Drag-and-Drop Attributes
  4. Relationship Attributes

Ви можете дізнатися про кожен атрибут ARIA більш детально на сторінці ARIA W3C.

Покращіть доступність вашого веб-сайту разом з InternetDevels!

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

Окрім ARIA, існує багато інших способів щоб зробити веб-платформу більш доступною. Тільки разом вони можуть зробити ваш сайт повністю доступним. Дозвольте нашій команді веб-підтримки з’ясувати, що саме потрібно зробити, і покращити доступність вашого веб-сайту!

Голосів: 1 Рейтинг: 5

Також по темі

1

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

2

Сьогодні команда InternetDevels пояснює, що таке розділ 508 та як зробити ваш веб-сайт більш доступним згідно ньому.

3

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

4

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

5

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

Subscribe to our blog updates