HtmlConceptBeginner · 3 min read

What is role attribute in HTML and How to Use It

The role attribute in HTML defines the purpose of an element to assistive technologies like screen readers. It helps describe what an element does, improving accessibility and user experience for people using assistive devices.

⚙️

How It Works

The role attribute acts like a label that tells assistive tools what kind of element they are dealing with. Imagine you are in a room with many objects, but you can't see them. Someone tells you "this is a button" or "this is a navigation menu" so you know how to interact with it. The role attribute does the same for screen readers.

It helps users who rely on these tools understand the structure and function of a webpage beyond just the visual layout. For example, a div element normally has no meaning, but if you add role="button", the screen reader treats it like a button.

💻

Example

This example shows a simple div acting as a button using the role attribute. It helps screen readers announce it as a button.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Role Attribute Example</title>
  <style>
    .custom-button {
      padding: 10px 20px;
      background-color: #007BFF;
      color: white;
      display: inline-block;
      cursor: pointer;
      border-radius: 4px;
      user-select: none;
    }
  </style>
</head>
<body>
  <div role="button" tabindex="0" class="custom-button" onclick="alert('Button clicked!')" onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); alert('Button clicked!'); }">
    Click Me
  </div>
</body>
</html>

Output

A blue rectangular button labeled 'Click Me' that triggers an alert saying 'Button clicked!' when clicked or activated by keyboard.

🎯

When to Use

Use the role attribute when you create custom elements or use generic HTML tags that do not have built-in meaning. This helps assistive technologies understand your page better.

For example, if you build a clickable area with a div or span, add role="button" so screen readers know it acts like a button. Similarly, use roles like navigation, main, banner, or alert to describe page sections or important messages.

This improves accessibility and makes your website easier to use for everyone.

✅

Key Points

The role attribute defines the purpose of an element for assistive technologies.
It improves accessibility by giving meaning to elements that lack semantic tags.
Common roles include button, navigation, main, and alert.
Use role when creating custom interactive elements or complex layouts.
Always combine role with keyboard support for full accessibility.

✅

Key Takeaways

The role attribute helps screen readers understand the purpose of HTML elements.

Use role to add meaning to non-semantic elements like div or span.

Common roles include button, navigation, main, and alert to improve page structure.

Always pair role with proper keyboard interaction for accessibility.

Adding roles makes your website more inclusive and easier to navigate for all users.