Frequently Asked Questions, semantic and accessible
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
index.html
license.md
readme.md

readme.md

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