将模块的状态存储为类或数据属性更好吗？

Question

考虑一个简单的手风琴模块，可以通过用户输入进行扩展或折叠。

如果模块的状态要存储在DOM上，那么应该采用哪种方式？

作为一个班级：

<article class="accordion-item expanded">...</article>

或作为自定义数据属性：

<article class="accordion-item" data-state="expanded">...</article>
alternatively...
<article class="accordion-item" data-expanded="true">...</article>

关于语义，可访问性和性能，应该使用哪种方法以及为什么？

Answer 1

对于辅助功能，您需要执行以下两项操作之一：

1. 使用手风琴http://www.w3.org/TR/wai-aria-practices/#accordion的WAI-ARIA创作指南实现手风琴，其中包含必要的咏叹调属性和用于键盘导航的JavaScript事件处理程序

2. 将手风琴的状态置于屏幕外文本中，并在其发生变化时进行维护。您可以通过在上面的每篇文章中添加<span>并使用与此处描述的技术类似的技术来完成此操作：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility