javascript - jQuery - aria-controls vs data attributes to identify/select DOM element - 哪个是首选方法？

Question

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

我见过带有 aria-controls 和数据属性的 DOM 元素(我可以将其中任何一个添加到我的 div 元素中，以便稍后使用 jQuery 找到它们并显示/隐藏它们)。

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

我用谷歌搜索了 aria-controls但还没有设法解决。

哪种方法是首选方法(为什么)？

非常感谢

Answer 1

When it comes to selecting DOM elements with jQuery, I wondered if there is a difference between the two methods?

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

从意识形态的 Angular 来看，是的。

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

我会使用这些准则:

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

ARIA 控件用于辅助功能，data 属性用于您自己的自定义用途，这对浏览器没有意义，但对您的应用程序有意义。最终，这是差异化因素。