Jquery ARIA和数据之间的区别是什么-*

为了给HTML标记添加更多含义，我使用了数据-*。实际上，我是从jquerymobile中学到这种方法的。但最近我遇到了WAI-ARIA。它似乎与数据-*几乎相似。有谁能解释一下，它们之间有什么不同，以及它们对浏览器的依赖性

有用的链接

关于

关于

更新：最后。。它们都是不同的。它们有一些非常相似的语法。这让我很困惑。我接受@Gajotres 回答。看到这个了吗 阿丽亚现场直播。将此视频与@Gajotres的答案匹配

---

它们之间没有什么共同之处，只是它们是HTML属性

ARIA属性在规范中定义，应该由相关软件（如浏览器和辅助软件）遵守

data-

属性是一种机制，专门用于页面范围或站点范围，用于任何需要的目的，没有通用的定义。也就是说，它们用于“私人用途”，基本上用于客户端脚本编写（也可能用于样式设计，也可以用于特定于站点的搜索引擎和创作工具）。站点中的

data foo

属性永远不会与规范中定义的任何属性或任何其他属性发生冲突，只要您（或站点管理员）保持其使用一致，并有自己的内部文档说明其对此类属性的使用。

data-*属性 W3C HTML5工作草案规定：

“自定义数据属性是名称不为的命名空间中的属性 以字符串“data-”开头，后面至少有一个字符 连字符……”

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

由于良好的支持，在野外已经存在许多自定义数据属性的示例。如果您有Dreamweaver CS5.5，则可以创建jQuery Mobile（JQM）应用程序。jquerymobile广泛使用自定义数据属性来标识元素、主题和许多其他内容的角色。以下是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-*属性 如果您努力让具有各种不同浏览习惯和身体残疾的用户可以访问您的网站，您可能会认识到角色和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-*属性可以使您的内容更易于浏览和理解。像咏叹调labelledby、咏叹调level、咏叹调describedby和咏叹调方向这样的东西都能让你的内容更容易辨认。您可以在ARIA状态和属性页面上阅读更多关于它的信息

结论:

---

坚持使用data-*属性。它们目前得到了更好的支持。并且，应该使用作为旧类型自定义属性的替换。此外，数据-*属性被创建为数据持有者，而ARIA和角色属性被创建为更好的可读性

你认为它们在哪些方面相似？我非常了解数据-*。aria具有类似的结构，如data popup=aria popup。我可以访问javascript中的数据弹出窗口。但是我能用aria弹出窗口做什么呢？如果你认为

data-*

类似于

aria-*

，那么你并不真正了解

data-*

@robertc是的。可能是。我知道数据-。但与aria无关，您使用

角色

属性和

aria关键字

告诉辅助技术（例如屏幕阅读器）元素的用途。它旨在改善残疾用户（例如盲人用户）的体验，使他们能够了解和/或进入页面的某些部分（标题、导航等）。

data关键字

是主观的，取决于您想给它命名什么，但它只是一种简单的技术，可以方便地管理数据，避免冲突和/或污染文档名称空间。坚持使用

data-*

属性做什么？

data-*

attributes如何提高可访问性？看看jQuery Mobile，你就会明白。你的意思是“坚持使用jQuery Mobile的data-*属性”？为什么不这么说呢？你可以在任何地方使用它，它们是用来作为数据存储的，jQuery Mobile就是一个很好的例子（好吧，也许在它应该做的事情上没有那么好，但这超出了重点）。