Перше правило ARIA

Порівняння некоректного прикладу з div role='list' і правильного прикладу з семантичними тегами ul/li

Часто проблеми вебдоступності вирішуються додаванням ARIA (ролей, станів та властивостей). Та варто пам’ятати Перше правило ARIA (The first rule of ARIA).

Перше правило ARIA:

Якщо ви можете використати нативний HTML-елемент із вже вбудованою семантикою, використовуйте його замість додавання ARIA-атрибутів чи ролей.

Наприклад, як показано на зображенні, якщо це список — використовуйте теги ul та li, а не div з ролями 'list' і 'listitem'.

Часом розробники не використовують семантичні теги, тому що ці теги мають стилі за замовчуванням. Щоб не перевизначати ці стилі в CSS, дехто обирає швидший варіант — додати ARIA роль до div. Однак це хибний шлях з точки зору вебдоступності. Не варто нехтувати семантичними тегами. Краще написати декілька додаткових рядків коду в CSS.

Доступність — це пріоритет.

Хочете покращити доступність вашого сайту?

Залиште запит із коротким описом вашого проєкту та цілей, і ми зв’яжемося з вами.

Залишити запит

Наші сервіси

Доступні UI-компоненти

Доступні UI-компоненти з семантичним HTML, з підтримкою навігації з допомогою клавіатури та скрінрідерів.

Переглянути компоненти

Послуги з вебдоступності

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

Дізнатися про послуги