17

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.

Community
  • 1
  • 1
user10
  • 5,186
  • 8
  • 43
  • 64
  • In what way do you think they're similar? – robertc Jan 30 '13 at 11:25
  • i know very well about data-*. aria has similar structure like, data-popup = aria-popup. i can access data-popup in javascript. but what can i do with aria-popup? – user10 Jan 30 '13 at 11:27
  • If you think `data-*` is similar to `aria-*` then you don't really know about `data-*` – robertc Jan 30 '13 at 11:36
  • @robertc yes. may be. i know about data-*. but not about aria-* – user10 Jan 30 '13 at 11:37
  • You use the `role` attribute along with the `aria-keyword` to tell assistive technologies (e.g., screen readers) the purpose of the element. It was designed to improve the experience of disabled users (e.g., blind users) so they can know and/or go to some parts of the page (header, navigation, etc.). The `data-keyword` is subjective, and depends on what you want to name it, but it is simply a technique for easily managing your data and to avoid conflicting and/or polluting the document namespace. –  Jan 30 '13 at 11:44
  • How are these links useful to your question? You seem to be plugging them for no reason at all. – BoltClock Jan 30 '13 at 11:46
  • @BoltClock Aren't they? data-role = aria-role. same semantics. And i'm trying to let others know if they don't know what they are. – user10 Jan 30 '13 at 11:49
  • No, they're not the same semantics, they have similar *syntax*, but then so do several other HTML attributes. That's why I'm telling you that you've not understood `data-*` attributes. – robertc Jan 30 '13 at 11:57
  • @robertc Thanks for pointing that out (syntax not semantics). How do you say, i haven't understood data-*. If you wish we can move to chat session. – user10 Jan 30 '13 at 12:06
  • Because you've taken a superficial syntactic similarity and assumed a semantic relationship. The whole point of `data-*` attributes is that they have no semantic value outside of your own application. The whole point of ARIA attributes is that they have semantic value outside of your application. – robertc Jan 30 '13 at 12:10
  • @robertc Actually, i didn't understand ARIA clearly and i didn't think it could function outside of the app. I thought it could be accessed somehow by javascript. And i haven't see any live examples. I thoght it should be a part of an app. That's why i posted this. – user10 Jan 30 '13 at 13:51

2 Answers2

21

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.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 3
    Stick with `data-*` attributes for what? How will `data-*` attributes improve accessibility? – robertc Jan 30 '13 at 12:11
  • take a look at jQuery Mobile and you will understand. – Gajotres Jan 30 '13 at 12:12
  • So you mean "Stick with data-* attributes for jQuery mobile"? Why not just say that? – robertc Jan 30 '13 at 12:26
  • 2
    You can use it anywhere you want, they are meant to be used as a data storage, jQuery Mobile is just a good example (ok maybe not that good in what it is supposed to do but that is beyond the point). – Gajotres Jan 30 '13 at 12:40
4

There is nothing common between them, except their being HTML attributes.

The ARIA attributes are defined in specifications and are supposed to be observed by relevant software, such as browsers and assistive software.

The data- attributes are a mechanism designated specifically for page-wide or site-wide use for whatever purposes are desired, with no general definition for them. That is, they are for “private use”, basically for client-side scripting (and possibly styling, and could be used in site-specific search engines too, and in authoring tools). A data-foo attribute in your site will never clash with any attribute defined in specifications or with anything else, as long as you (or the site admin) keeps its usage consistent and has their own internal documentation of their use of such attributes.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390