Is it better to store a module's state as a class or a data-attribute?

Question

Consider a simple accordion module that can be expanded or collapsed with user input.

If the state of the module is to be stored on the DOM, which way should this be implemented?

As a class:

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

or as a custom data-attribute:

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

With respect to semantics, accessibility and performance, which method should be used and why?

Answer 1

For accessibility, you need to do one of two things:

1. Implement an accordion using the WAI-ARIA authoring guidelines for an accordion http://www.w3.org/TR/wai-aria-practices/#accordion with the requisite aria-attributes and JavaScript event handlers for keyboard navigation

2. Put the state of the accordion in an off screen text and maintain it whenever it changes. You can do this by adding a <span> to each of your articles above and using a technique like the ones described here: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility