Question

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

有用的链接

约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-describedby和aria-orientation这样的东西都会让你的内容更容易识别。您可以在ARIA状态和属性页面上阅读更多相关信息。

结论：

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

Answer 2

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

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

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

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

2 个答案:

data- *属性

角色和aria- *属性

结论：