Though FAQ is in the name, it can be used to make accorions for things other than FAQs.
FAQ 2115 is capable of three things:
Manual DL List (Not Accordion)
Manual DL List Accordion
Manual Section List (h4) (Not Accordion)
Manual Section List Accordion (h4)
Manual Section List Accordion (h4)
Manual Section List Accordion (h5) stay open
Allow Multiple = false
Allow Toggle = false (but overriden since allow multiple is true)
The information architecture is simple and uses a semantic structure native to HTML. These are then transformed into interactive widgets using JavaScript. If JavaScript is not enabled they will still work just fine. (Except for the placeholder which is why it is recommended to place a link inside the div. It will be replaced once the script executes.)
<style>
.Accordion-trigger:focus .Accordion-icon,
.Accordion-trigger:hover .Accordion-icon {
border-color:#f1f1f1;
}
.Accordion-trigger {
background-color: #f1f1f1;
color: #000000;
}
.Accordion-trigger:focus,
.Accordion-trigger:hover {
background-color: #98999b;
color: #000000;
}
.Accordion-trigger[aria-expanded="true"] {
background-color: #510c76;
color: #ffffff;
}
.Accordion-panel {
}
</style>
<!-- Placeholder / We place a direct link in case JavaScript is disabled. It will be replaced with external content if JavaScript is enabled -->
<div class="faq2115-placeholder-accordion" data-faq-topic="66817"><a href="">Direct link</a></div>
<!-- Div grouping of headers and div panels -->
<div class="faq2115-accordion" data-allow-multiple="false">
<h3>My question 1</h3>
<div>My Answer 1</div>
<h3>My question 2</h3>
<div>My Answer 2</div>
</div>
<!-- Definition List -->
<dl class="faq2115-accordion" data-allow-toggle="true">
<dt>My question 1</dt>
<dd>My Answer 1</dd>
<dt>My question 2</dt>
<dd>My Answer 2</dd>
</dl>
FAQ 2115 uses definition lists (dl) and heading/div pairs to display items as they are best suited to semantically organize the information within an FAQ.
Disclosure and Accordion design patterns from W3 are used for accessibility. These automatically add aria tags, focus, and keystrokes.
Note: Running an accessibility checker will display warnings about the dl or div grouping header/divs "Must be focusable and should have interactive semantics." However, this warning can be ignored as the list themselves do not provide any interaction. The way W3's WAI ARIA uses JavaScript to allow-toggle and allow-multiple requires a click to be registered. The actual interactive element is properly placed, and keyboard activiated, within the FAQ item. It may be possible to re-write this code to invoke the group toggle from within the individual element. It may even be necessary to do this for sub-faqs. This is just an issue identified by the validator and does not degrade performance by assistive tech.
Icon placement was a concern. Where to Place Your Accordion Menu Icons / UX Movement gave evidence on placing the icon to the left of the title. The strong evidence for placing it to the left of the title was people tend to click on the icon rather than text, no placing it next to the text in an aligned fashion allows for less mouse movement.
However, deciding on an arrow vs. plus/minus sign to denote open/closed in the previous article didn't satisfy me so I turned to Accordion Icons / NNGroup as the deciding factor. After referencing both of these resources it seemed that the pros/cons for a rotating carat was the winner.