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

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 创作指南实现手风琴，以及键盘导航所需的 aria 属性和 JavaScript 事件处理程序

2. 将手风琴的状态放在屏幕外的文本中，并在它发生变化时对其进行维护。为此，您可以向上面的每篇文章添加<span>并使用如下所示的技术：http://snook.ca/archives/html_and_css/hiding-content-for-accessibility