ARIA 和数据有什么区别-*

Question

为了给 HTML 标签添加更多含义，我使用了 data - *。实际上我已经从 jquery mobile 学到了这种方法。但最近我遇到了WAI-ARIA。它似乎与 data - * 几乎相似。谁能解释一下，这些有何不同以及它们的浏览器依赖性？

有用的链接

关于WAI-ARIA

关于data-*

更新： 最后.. 他们都是不同的。他们有一些多么相似的语法。这让我很困惑。我接受@Gajotres 回答。看到这个you tube video 为 ARIA 直播。将此视频与@Gajotres 的答案相匹配。

Answer 1

data-* 属性

W3C HTML5 工作草案指出：

"自定义数据属性是没有名称空间中的属性 以字符串“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-* 属性

如果您努力让具有各种不同浏览习惯和身体残疾的用户能够访问您的网站，您可能会认识到角色和 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- describeby 和 aria-orientation 这样的东西都会让你的内容更容易识别。您可以在 ARIA 状态和属性页面上阅读有关它的更多信息。

结论：

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

Answer 2

它们之间没有任何共同点，除了它们是 HTML 属性。

ARIA 属性在规范中定义，应该被相关软件（例如浏览器和辅助软件）观察到。

data- 属性是一种专门为页面范围或站点范围使用而指定的机制，用于任何所需的目的，没有对它们的一般定义。也就是说，它们是“私人使用”的，基本上用于客户端脚本（可能还有样式，也可以用于特定于站点的搜索引擎和创作工具）。只要您（或站点管理员）保持其使用一致并且有自己的内部文档说明他们对此类属性的使用，您站点中的 data-foo 属性将永远不会与规范中定义的任何属性或其他任何属性发生冲突。