Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 

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

About

Frequently Asked Questions, semantic and accessible

Resources

License

Releases

No releases published

Packages

No packages published