HTML role Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The role attribute is a global attribute in HTML, meaning it can be applied to any HTML element. It provides semantic information about the purpose or function of an element, primarily for accessibility purposes. Screen readers, assistive technologies, and other user agents can use the role attribute to better interpret the element’s meaning and how users should interact with it.

Purpose

The role attribute helps define:

Landmark roles: Identify major sections of a page (e.g., navigation, main content, banners, complementary content).
Widget roles: Describe interactive components such as buttons, sliders, tabs, or menus.
Document structure roles: Convey structural or semantic information (e.g., headings, list items, alerts).

This makes web content more accessible to users with disabilities, especially when semantic HTML elements aren’t used or when dynamic content is present.

Syntax

<element role="role_name">Content</element>

role_name is a predefined value from the WAI-ARIA role definitions.
Roles can be landmark, widget, document structure, or live region roles.
Some roles can have subtypes or additional properties, which enhance accessibility.

Common Role Values

Role	Description
`banner`	Represents site-oriented content at the top of a page (usually header).
`main`	Denotes the primary content of a document.
`complementary`	Represents supporting content, like sidebars.
`navigation`	Identifies a section with navigation links.
`button`	Marks an interactive button.
`checkbox`	Represents a checkable item in a list or form.
`dialog`	Represents a dialog box or popup.
`alert`	Indicates important, usually time-sensitive messages.
`tab`	Identifies a selectable tab in a tabbed interface.
`progressbar`	Represents a progress indicator for a task.

Tip: If a native HTML element already conveys a role (e.g., <button> is implicitly role="button"), explicitly adding role is often unnecessary unless overriding or enhancing semantics.

Usage Examples

1. Landmark Roles

<header role="banner">
  <h1>Website Header</h1>
</header>

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

<main role="main">
  <p>Main content goes here.</p>
</main>

<aside role="complementary">
  <p>Related links or sidebar content.</p>
</aside>

2. Widget Roles

<div role="button" tabindex="0" onclick="alert('Clicked!')">
  Click Me
</div>

<div role="dialog" aria-labelledby="dialogTitle">
  <h2 id="dialogTitle">Dialog Title</h2>
  <p>This is a dialog box.</p>
</div>

Key Points

role improves accessibility and semantic clarity.
Use it especially when non-semantic elements (<div> or <span>) are used for interactive or structural purposes.
Many assistive technologies rely on role to announce and navigate content efficiently.
Combining role with ARIA attributes (like aria-labelledby, aria-checked, aria-expanded) provides full semantic meaning.

Syntax

<div role="role-value">...</div>

Values

roleA single string (or a space-separated list of strings) representing a valid ARIA role. Role values are case-sensitive and must be lowercase

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Role Attribute Example</title>

  <style>

    header, nav, main, aside, footer {

      padding: 1em;

      margin: 0.5em 0;

      border: 1px solid #ccc;

    }

    .button {

      display: inline-block;

      padding: 0.5em 1em;

      background-color: #007BFF;

      color: white;

      cursor: pointer;

      border-radius: 4px;

    }

  </style>

</head>

<body>



  <!-- Header as a landmark banner -->

  <header role="banner">

    <h1>My Website</h1>

  </header>



  <!-- Navigation section -->

  <nav role="navigation">

    <ul>

      <li><a href="#">Home</a></li>

      <li><a href="#">About</a></li>

      <li><a href="#">Contact</a></li>

    </ul>

  </nav>



  <!-- Main content area -->

  <main role="main">

    <h2>Welcome!</h2>

    <p>This is the main content of the page.</p>



    <!-- Interactive button with a role -->

    <div role="button" class="button" tabindex="0" onclick="alert('Button clicked!')">

      Click Me

    </div>

  </main>



  <!-- Sidebar / complementary content -->

  <aside role="complementary">

    <h3>Related Links</h3>

    <ul>

      <li><a href="#">Resource 1</a></li>

      <li><a href="#">Resource 2</a></li>

    </ul>

  </aside>



  <!-- Footer landmark -->

  <footer role="contentinfo">

    <p>&copy; 2025 My Website</p>

  </footer>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML role global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.