2.1.1 Keyboard (A) Collapsible elements not accessible via keyboard

Collapsible elements throughout the page cannot be operated (expand / collapse) by keyboard navigation as the interactive elements are custom built and do not use correct semantic HTML. The elements use an HTML description list <dl>. Example code from FAQ:

<dt class="accordion__term" data-accordion="term" tabindex="0">
  <h3 class="accordion__title">...</h3>
</dt>
<dd
  class="accordion__description accordion__description--hidden"
  data-open-class="accordion__description--open"
  data-hidden-class="accordion__description--hidden"
  data-accordion="description"
>
  <div class="accordion__content">
    <p class="paragraph">...</p>
  </div>
</dd>

Observations about the example code:

• Description lists consist of terms and descriptions. An FAQ question item can not be considered a term.

• Setting tabindex="0" to allow keyboard focus of non-interactive element is bad practice and should be avoided

• data-* attributes in description try to build accordion functionality

• <div class="accordion__content"> is an unnecessary hierarchy level

• A CSS paragraph class <p class="paragraph"> should not ever be needed