/accessible-faq

Frequently Asked Questions, semantic and accessible

Primary LanguageJavaScriptThe UnlicenseUnlicense

FAQ using WAI-ARIA roles to meet WCAG 2 level AA

Demo: FAQ using WAI-ARIA roles to meet WCAG 2 level AA


Features

  • Lightweight vanilla JavaScript with zero dependencies.
  • Meets WCAG 2 level AA and uses WAI-ARIA roles.
  • Answers may be expanded by default.
  • Answers may be expanded by URI fragment.
  • Answer heights are resolved via JavaScript.
  • Animations are CSS controlled.

Basic usage

Link to styles

<link rel="stylesheet" href="css/styles.css">

A definition list dl is used for the FAQ.
Definition title dt for the question, and definition data dd for the answer.
Add the data attribute data-pab to the dt with the id value of the dd to control.
Add the data attribute data-pab-expand to a dt for it to be expanded by default.
To expand an answer via URI fragment, reference the dd id.

<dl class="dl-faq pab_container">

  <dt data-pab=faq_1><span>Question</span></dt>
  <dd id=faq_1>
    <div>
      <p>Answer</p>
    </div>
  </dd>

  ...

</dl>

Include the JavaScript

<script src="js/accessible-faq.1.0.js"></script>

CodePen demo: FAQ using ARIA roles to meet WCAG 2 level AA

Mike Foskett @ webSemantics