role Attribute

The role attribute is based on the WAI-ARIA specification and communicates the role of an HTML element to assistive technologies such as screen readers.

Syntax

<!-- Make a div function as a button -->
<div role="button" tabindex="0">Submit</div>

<!-- Explicitly mark a navigation region -->
<div role="navigation" aria-label="Main navigation">
  <ul>
    <li><a href="/?lang=en">Home</a></li>
    <li><a href="/about?lang=en">About</a></li>
  </ul>
</div>

Common role values

Value	Description
button	Marks an element that functions as a button. Tells the screen reader that the element can be activated with the Enter or Space key.
navigation	Indicates a group of navigation links. Equivalent in meaning to the `nav` element.
dialog	Indicates a modal dialog or popup. The screen reader notifies the user when the dialog opens.
alert	Indicates an important message or warning. The screen reader announces it immediately when the element is inserted.
main	Indicates the main content area of the page. Equivalent in meaning to the `main` element.
banner	Indicates the site-wide header region. Equivalent in meaning to a `header` element that is a direct child of `body`.
complementary	Indicates a sidebar or other area that complements the main content. Equivalent in meaning to the `aside` element.
contentinfo	Indicates footer information such as copyright notices or contact details. Equivalent in meaning to a `footer` element that is a direct child of `body`.

Sample code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>role attribute sample</title>
  <style>
    [role="button"] {
      display: inline-block;
      padding: 8px 16px;
      background: #0066cc;
      color: white;
      border-radius: 4px;
      cursor: pointer;
    }
    [role="alert"] {
      padding: 12px;
      background: #ffe0e0;
      border: 1px solid #cc0000;
      border-radius: 4px;
    }
    [role="dialog"] {
      border: 2px solid #ccc;
      padding: 16px;
      background: white;
      border-radius: 8px;
      max-width: 400px;
    }
  </style>
</head>
<body>

  <!-- Use role="button" on a div to make it function as a button -->
  <div role="button" tabindex="0" aria-pressed="false" id="myBtn">
    Click here
  </div>

  <!-- Use role="alert" for an error message -->
  <div role="alert" id="errorMsg" aria-live="assertive">
    There is an error in your input. Please check and try again.
  </div>

  <!-- Use role="dialog" for a modal dialog -->
  <div role="dialog" aria-modal="true" aria-labelledby="dialogTitle">
    <h2 id="dialogTitle">Confirm</h2>
    <p>Are you sure you want to delete this?</p>
    <div role="button" tabindex="0">Yes</div>
    <div role="button" tabindex="0">No</div>
  </div>

</body>
</html>

Result

Each element is displayed with its styles applied. When using a screen reader, each element is announced as a button, alert, or dialog respectively.

[Click here]  ← blue button

┌─────────────────────────────────────┐
│  There is an error in your input... │  ← red alert box
└─────────────────────────────────────┘

┌──────────────────────┐
│  Confirm             │
│  Are you sure you... │
│  [Yes] [No]          │  ← dialog
└──────────────────────┘

Notes

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a specification for improving web accessibility. The role attribute is central to it, conveying the meaning and purpose of elements to assistive technologies such as screen readers and voice recognition software.

The role attribute is intended only to supplement semantics — the principle is to prefer native HTML semantics. For example, use a button element rather than div role="button", and use a nav element rather than div role="navigation". Reserve the role attribute for custom UI components that cannot be expressed with semantic HTML elements.

ARIA attributes commonly used alongside role include aria-label for labeling, aria-expanded and aria-pressed for conveying state, and aria-live for announcing dynamic changes. Combining these appropriately is essential for building accessible UIs.

If you find any errors or copyright issues, please contact us.

Home