What Is the Purpose of the "Role" Attribute in Html

What is the purpose of the role attribute in HTML?

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML via supporting specs like HTML-AAM. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

http://www.w3.org/TR/wai-aria/

While the First Rule of Aria states:

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

there are a few primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

Screen readers users will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

[role="button"] {
  /* style these as buttons w/o relying on a .button class */
}

[Update 7 years later: removed the * selector to make some commenters happy, since the old browser quirk that required universal selector on attribute selectors is unnecessary in 2020.]

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

<main role="main">…</main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary for main.

Reason #3.
Update 7 years later (2020): As at least one commenter pointed out, this is now very useful for custom elements, and some spec work is underway to define the default accessibility role of a web component. Even if/once that API is standardized, there may be need to override the default role of a component.

Note/Reply

You also wrote:

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's an allowed use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

<span role="foo link note bar">...</a>

Out of the list, only link and note are valid roles, and so the link role will be applied in the platform accessibility API because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

What is importance of role attribute in html5?

Use cases for a role attribute for HTML5, include:

• accessibility.
• device adaptation.
• server-side processing.
• complex data description.

Source : http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

why use role attribute in html5

It provides support for ARIA (Accessible Rich Internet Applications) which allows to specify even more semantic richness in documents.

You can add role="search" to your search form, role="banner" to your
masthead, and role="contentinfo" to your page footer. There’s a full
list of values in the ARIA specification at
http://www.w3.org/TR/wai-aria/roles#role_definitions.

Basically you don't have to add them, but its better if you do as it provides more context for your page. More discussed at A List Apart.

HTML5 role attribute for tags

As defined by W3C, you can use this values for role attribute:

• banner
• complementary
• contentinfo
• definition
• main
• navigation
• note
• search

contentinfo purpose is to provide meta information about the content, so it could be used for tag management. That said, <h1> shouldn't be used as tags, as it's main purpose is to explicitly describe the whole page

Source

What is XHTML role attribute? What do you use it for?

The Short Version:

The Role Attribute may give future browsers a way to work intelligently with certain XML elements in a device-independent way. For example, an unordered list that is marked with the role attribute of "navigation" can be interpreted intelligently on browsers in both desktop and handheld environments, allowing it to be displayed clearly in both environments.

The Long Version:

The XHTML Role Attribute defined in this specification allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description.

The attribute describes the role(s) the current element plays in the context of the document. This can be used, for example, by applications and assistive technologies to determine the purpose of an element. This could allow a user to make informed decisions on which actions may be taken on an element and activate the selected action in a device independent way. It could also be used as a mechanism for annotating portions of a document in a domain specific way (e.g., a legal term taxonomy).

Example:

<ul role="navigation sitemap">
    <li href="downloads">Downloads</li>
    <li href="docs">Documentation</li>
    <li href="news">News</li>
</ul>

Given that the XHTML2 Working Group will cease to exist at the end of this year, there's no chance of this specification ever reaching release status in anything resembling its current form. http://www.w3.org/News/2009#entry-6601

What does role= button mean?

It tells accessibility (and other) software what the purpose of the div is. More here in the draft role attribute specification.

Yes, it's just semantic. Sending a click event to the button should work.

An earlier version of this answer (back in 2011) said:

...but jQuery's click function doesn't do that; it triggers only the event handlers that have been hooked up to the element with jQuery, not handlers hooked up in other ways.

...and provided the sample code and output below.

I cannot replicate the output now (two years later). Even if I go back to earlier versions of jQuery, they all trigger jQuery handlers, DOM0 handlers, and DOM2 handlers. The order isn't necessarily the same between a real click and jQuery's click function. I've tried jQuery versions 1.4, 1.4.1, 1.4.2, 1.4.3, 1.4.4, 1.5, 1.5.1, 1.5.2, 1.6, and more recent releases such as 1.7.1, 1.8.3, 1.9.1, and 1.11.3 (the current 1.x release as of this writing). I can only conclude that it was a browser thing, and I don't know what browser I was using. (Right now I'm using Chrome 26 and Firefox 20 to test.)

Here's a test which shows that indeed, jQuery handlers, DOM0 handlers, and DOM2 handlers are all (as of this writing!) triggered by jQuery's click:

jQuery(function($) {  var div;
  $("<p>").text("jQuery v" + $.fn.jquery).appendTo(document.body);
  // Hook up a handler *not* using jQuery, in both the DOM0 and DOM2 ways  div = document.getElementById("theDiv");  div.onclick = dom0Handler;  if (div.addEventListener) {    div.addEventListener('click', dom2Handler, false);  } else if (div.attachEvent) {    div.attachEvent('onclick', dom2Handler);  }
  // Hook up a handler using jQuery  $("#theDiv").click(jqueryHandler);
  // Trigger the click when our button is clicked  $("#theButton").click(function() {    display("Triggering <code>click</code>:");    $("#theDiv").click();  });
  function dom0Handler() {    display("DOM0 handler triggered");  }
  function dom2Handler() {    display("DOM2 handler triggered");  }
  function jqueryHandler() {    display("jQuery handler triggered");  }
  function display(msg) {    $("<p>").html(msg).appendTo(document.body);  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><div id="theDiv">Try clicking this div directly, and using the button to send a click via jQuery's <code>click</code> function.</div><input type='button' id='theButton' value='Click Me'>