ARIA roles provide semantics to elements that do not have them natively, such as a div used as a button. Always prefer native semantic HTML elements, but when that is not possible, ARIA can fill the gaps for assistive technologies.
Accessibility: Using ARIA roles
<div
role="button"
tabindex="0"
onclick="handleAction()"
onkeydown="(event) => { if(event.key === 'Enter' || event.key === ' ') handleAction() }"
>
Click Me
</div>
<div role="navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</div>
Great overview of ARIA. So important!