When a screen reader encounters an element on your page, it needs to know what that element is — is it a button? A navigation menu? A search box? The role attribute tells assistive technologies what an element is supposed to do, especially when you are using non-semantic elements or building custom widgets.
Why Roles Matter
HTML has semantic elements like <button>, <nav>, and <header> that communicate their purpose automatically. But sometimes you build custom UI with generic elements like <div> and <span>. Adding a role tells the browser and screen readers what that element actually is.
<div role="button" tabindex="0" onclick="handleClick()">
Click Me
</div>
<div role="alert">
Your session will expire in 5 minutes.
</div>
Common Widget Roles
Widget roles describe interactive elements. Use button for clickable actions, link for navigation, tab and tabpanel for tabbed interfaces, and menu or menuitem for dropdown menus.
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>
<div role="tabpanel">Content for Tab 1</div>
<div role="menu">
<div role="menuitem">Option 1</div>
<div role="menuitem">Option 2</div>
</div>
Landmark Roles
Landmark roles help screen reader users navigate the page structure. banner for site headers, navigation for nav menus, main for the primary content, contentinfo for footers, and complementary for sidebars.
<div role="banner">Site Header</div>
<div role="navigation">Main Menu</div>
<div role="main">Page Content</div>
<div role="complementary">Related Info</div>
<div role="contentinfo">Footer</div>
Prefer Semantic HTML First
The role attribute is powerful, but it should be your second choice. Whenever possible, use the correct semantic HTML element instead. A <button> already has an implicit role of "button" — adding role="button" to it is redundant. Use roles when you are building custom components with generic elements.
<!-- Good: semantic HTML handles the role -->
<button>Save</button>
<nav>Menu</nav>
<!-- Use role when semantic elements are not an option -->
<div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
75% Complete
</div>