role

role is a property on HTML elements that allows you to define semantic meaning of an element for assistive technologies.

When to use

• On custom interactive elements like modals, tooltips, or tabs.
• When the native semantic element cannot be used.

Common Roles

• button - Represents a button
• dialog - Defines a modal
• alert - announces important information
• tablist - defines a tab
• tabpanel - defines an element associated with a tab

Example

<div role="button" tabindex="0" onclick="handleClick()">  
  Custom Button  
</div>