Skip to content
Frequently Asked Questions, semantic and accessible
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit 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
You can’t perform that action at this time.