Frequently Asked Questions, semantic and accessible
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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

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


  • 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>



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