Какова цель атрибута "роль" в HTML?

большинство ролей, которые вы видите, были определены как часть ARIA 1.0, а затем позже включены в HTML5. Некоторые из новых элементов HTML5 (dialog, main и др.) даже основаны на оригинальных ролях арии.

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 и т. д.)