Перше правило 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.

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

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

Залиште запит на консультацію, коротко описавши свій проєкт, цілі та поточні виклики. Ми допоможемо визначити оптимальний наступний крок.

Замовити консультацію