ARIA和data-*之间有什么区别

Question

要为HTML标记添加更多含义,我使用数据 - *.实际上我已经从jquery mobile学到了这种方法.但最近我遇到了WAI-ARIA.它似乎与数据几乎相似- *.任何人都可以解释我,这些是不同的和他们的浏览器依赖？

有用的链接

关于WAI-ARIA

关于数据 - *

更新:最后......他们俩都不一样.他们有一些类似的语法.这让我很困惑.我接受@Gajotres的回答.看到这个你 为ARIA直播视频.将此视频与@ Gajotres的回答相匹配.

Answer 1

data-*属性

W3C HTML5工作草案规定:

"自定义数据属性是no namespace中的一个属性,其名称以字符串"data-"开头,并且在连字符后面至少有一个字符......"

这些自定义数据属性允许您创建属性以与在您自己的站点上运行的脚本共享数据.它们不能被通用软件使用或收获.您不限制可以指定的自定义数据属性的数量.根据caniuse.com,"所有浏览器都可以使用data-*属性并使用getAttribute访问它们."

由于良好的支持,有很多自定义数据属性的例子已经存在.如果您有Dreamweaver CS5.5,则可以创建jQuery Mobile(JQM)应用程序.jQuery Mobile广泛使用自定义数据属性来识别元素,主题和许多其他事物的角色.以下是JQM页面的示例:

<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>

角色和咏叹调 - *属性

如果您努力使具有各种不同浏览习惯和身体残疾的用户可以访问您的网站,您可能会认识到角色和aria-*属性.WAI-ARIA(可访问的富Internet应用程序)是一种提供定义动态Web内容和应用程序的方法,以便残障人士可以识别并成功与之交互.这是通过定义文档或应用程序结构的角色,或通过定义小部件角色,关系,状态或属性的aria-*属性来完成的.

建议在规范中使用ARIA,以使HTML5应用程序更易于访问.使用语义HTML5元素时,应设置相应的角色.基本结构可能如下所示:

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

还有许多aria-*属性可以使您的内容更易于浏览和理解.像aria-labelledby,aria-level,aria-describedby和aria-orientation这样的东西都会让你的内容更容易识别.您可以在ARIA状态和属性页面上阅读更多相关信息.

结论:

坚持使用data-*属性.他们目前得到更好的支持.并且应该用作旧类型自定义属性的替代品.此外,data-*属性被创建为数据持有者,同时创建ARIA和ROLE属性以提高可读性.