Is this the correct way to use html role?

Question

As I have seen that the role attribute is fully supported in HTML5 semantics doctype. I have used it in JQuery selectors such as:

<div role="inputForm">
  <div role="field">
    Name : <input type="text" role="name" />
  </div>
  <div role="field">
    Address : <textarea type="text" role="address"></textarea>
  </div>
  <div role="field">
    Country : <select role="country"></select>
  </div>
</div>

<script>
var inputForm = $("div[role='inputForm']");
var fields = $(inputForm.find("div[role='field']"));
var nameField = $(inputForm.find("input[role='name']"));
</script>

As I have known, the same attribute is being used in JqGrid , grid plugin for JQuery .

I think that this selector is more efficient and modular than class / id based selector. However, is this the correct use of role attribute in HTML5? Or is there any risk of doing this design?

If this kind of design does not supported / recommended as HTML best practice, is there any way to achieve the same?

I cannot find any articles or supported documents for this kind of usage.

Answer 1

It appears you should be using id instead of role (though not for your role="field" attributes... those should be classes).

It short, your role attribute values are not being used as intended per the WAI-ARIA specification.

The role attribute should be used to assign semantic meaning to document elements, and there are a limited set of valid and appropriate values defined by the Accessible Rich Internet Applications Suite (ARIA), to make Web content and Web applications more accessible.

An extensive list of the valid role attribute values can be found at the W3C spec documentation for The Roles Model: http://www.w3.org/TR/wai-aria/roles#abstract_roles

Answer 2

No, it is not. HTML5 defines :

Authors may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in the ARIA specifications, except where these conflict with the strong native semantics described below.

Your values inputForm and field are not valid .

If you use the role attribute correctly, you can of course use it as a hook in CSS and JS, too.

---

I think that this selector is more efficient and modular than class / id based selector.

Your actual intention seems to be to find an identifier that can be used on several (third party) sites, without the risk of name collisions .

You could use the class , the id , or the data-* attributes . To make collisions unlikely, you could use a "rare" prefix, for example your domain name ( example.com ):

<div class="com-example-foo"></div> 
<div id="com-example-foo"></div> 
<div data-com-example="foo"></div> <!-- preferred, because the prefix is not part of the value -->

Another possibility would be to use a custom vocabulary with Microdata or RDFa . As you can use your own URIs as value, it's very unlikely that anyone else would use these (unless you publish your vocabulary and it's useful for others ;-)).