jQuery - 用于识别/选择 DOM 元素的 aria-controls 与数据属性 - 哪个是首选方法？

Question

我正在设计一个网页，并希望能够根据用户单击过滤器按钮来隐藏/显示某些 div。

我已经看到带有 aria-controls 和 data-attributes 的 DOM 元素（我可以将其中任何一个添加到我的 div 元素中，以便以后使用 jQuery 找到它们并显示/隐藏它们）。

说到用jQuery选择DOM元素，我想知道这两种方法有区别吗？

我已经用 Google 搜索了 aria-controls，但还没有成功。

哪种方法是首选方法（为什么）？

非常感谢

Answer 1

说到用jQuery选择DOM元素，我想知道这两种方法有区别吗？

从性能的角度来看，没有。它们都只是属性，我不知道有什么特殊机制可以通过aria-* 属性提高查找元素的性能。

从意识形态的角度来看，是的。

aria-* 属性旨在增强 JavaScript 重页的可访问性。如果您的 JavaScript 的目的是增强可访问性，那么基于 aria 属性选择元素可能是有意义的。如果您只想识别用户界面组件，那么使用data 属性可能更具描述性。如果您希望在较旧的浏览器中支持较新浏览器中的可访问性功能，那么基于 aria 属性的 JavaScript 选择元素是有意义的，因为您正在创建一个 pollyfill，即使在受支持的情况下也很可能需要使用 aria 属性浏览器。

我会使用这些准则：

1. 为旧版浏览器中的辅助功能创建 pollyfills（由 aria 选择）
2. 构建您自己的可访问性增强功能（由aria 选择）
3. 想要识别用户界面元素而不考虑可访问性，或者与可访问性无关（使用data 属性）

ARIA 控件用于可访问性，data 属性用于您自己的自定义使用，对浏览器没有意义，但对您的应用程序有意义。归根结底，这是差异化因素。