What is the difference between ARIA and data-*

Question

To add more meaning to the HTML tag i am using data - *. Actually i have learned this approach from jquery mobile. But recently i came across WAI-ARIA. It seems like it is almost similar to data - *. Can anyone explain me,how these are different and their browser dependency?

Useful Links

about WAI-ARIA

about data-*

UPDATE: Finally.. they both are different. They have some how similar syntax. That made me confused. I am accepting @Gajotres answer. And see this you tube video for ARIA live. Match this video with @Gajotres's answer.

Answer 1

The data-* attribute

The W3C HTML5 Working Draft states:

"A custom data attribute is an attribute in no namespace whose name starts with the string "data-", and has at least one character after the hyphen..."

These custom data attributes allow you to create attributes to share data with scripts run on your own site. They are not to be used, or harvested, by generic software. You are not limited in how many custom data attributes you can specify. According to caniuse.com, "all browsers can already use data-* attributes and access them using getAttribute."

Due to good support, there are many examples of custom data attributes that already exist in the wild. If you have Dreamweaver CS5.5, you can create a jQuery Mobile (JQM) application. jQuery Mobile makes extensive use of custom data attributes for identifying roles of elements, themes, and many other things. Here's an example of a JQM page:

<div data-role="page" id="page" data-theme="b"> 
    <div data-role="header"> 
        <h1>Header</h1> 
    </div> 
    <div data-role="content">Content</div> 
    <div data-role="footer"> 
        <h4>Footer</h4> 
    </div> 
</div>

The role and aria-* attributes

If you put effort into making your website accessible to users with a variety of different browsing habits and physical disabilities, you'll likely recognize the role and aria-* attributes. WAI-ARIA (Accessible Rich Internet Applications) is a method of providing ways to define your dynamic web content and applications so that people with disabilities can identify and successfully interact with it. This is done through roles that define the structure of the document or application, or through aria-* attributes defining a widget-role, relationship, state, or property.

ARIA use is recommended in the specifications to make HTML5 applications more accessible. When using semantic HTML5 elements, you should set their corresponding role. The basic structure may look something like this:

<header id="banner" role="banner"> 
    ... 
</header> 
<nav role="navigation"> 
   ... 
</nav> 
<article id="post" role="main"> 
   ... 
</article> 
<footer role="contentinfo"> 
    ... 
</footer>

There is also a host of aria-* attributes to make your content more navigable and understandable. Things like aria-labelledby, aria-level, aria-describedby, and aria-orientation all make your content more recognizable. You can read more about it on the ARIA states and properties page.

Conclusion:

Stick with a data-* attributes. They are currently better supported. And the should be used as a replacement for older type of custom attributes. Also data-* attributes are created to be data holders while ARIA and ROLE attributes are created for better readability.