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

Question

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

我已经看到了带有咏叹调控件和数据属性的DOM元素（我可以添加到我的div元素中，以便稍后使用jQuery查找它们并显示/隐藏它们）。

在使用jQuery选择DOM元素时，我想知道这两种方法之间是否存在差异？

我用Google搜索了aria-controls，但还没有设法解决这个问题。

哪种方法是首选（及其原因）？

非常感谢

Answer 1

  

在使用jQuery选择DOM元素时，我想知道这两种方法之间是否存在差异？

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

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

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

我会使用这些指南：

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

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