Більшість ролей, які ви бачите, були визначені як частина ARIA 1.0, а потім включені до HTML5. Деякі з нових елементів HTML5 (діалогове, головне тощо) навіть базуються на оригінальних ролях ARIA.
http://www.w3.org/TR/wai-aria/
Є дві основні причини використовувати ролі крім рідного смислового елемента.
Причина №1. Переосмислення ролі, коли жоден елемент мови хосту не підходить або, з різних причин, був використаний менш семантично відповідний елемент.
У цьому прикладі було використано посилання, хоча отримана функціональність більше нагадує кнопку, ніж навігаційну.
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Читачі екрана почують це як кнопку (на відміну від посилання), і ви можете використовувати селектор атрибутів CSS, щоб уникнути class-itis та div-itis.
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Причина №2. Резервне копіювання ролі нативного елемента для підтримки браузерів, які реалізували роль ARIA, але ще не виконали роль нативного елемента.
Наприклад, "головна" роль підтримується в браузерах протягом багатьох років, але це відносно недавнє доповнення до HTML5, тому багато браузери ще не підтримують семантичну <main>.
<main role="main">…</main>
Це технічно непотрібно, але допомагає деяким користувачам і не шкодить жодному. Через кілька років ця методика, ймовірно, стане непотрібною.
Ви також писали:
Я бачу, як деякі люди складають свої власні. Чи дозволено це чи правильне використання атрибута ролі?
Це правильне використання атрибута, якщо реальна роль не включена. Браузери застосовуватимуть першу визнану роль у списку токенів.
<span role="foo link note bar">...</a>
Зі списку лише linkі noteє дійсні ролі, і тому роль посилання буде застосована тому, що вона стає першою. Якщо ви використовуєте власні ролі, переконайтеся, що вони не суперечать жодній визначеній ролі в ARIA або мові хоста, яку ви використовуєте (HTML, SVG, MathML тощо)