/
index.html
101 lines (73 loc) · 4.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang=en-GB>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Semantic and accessible FAQ</title>
<link rel=stylesheet href=css/styles.css>
</head>
<body>
<svg style="display:none">
<defs>
<symbol viewBox="0 0 38 38" id="icon-plus">
<title>Show</title>
<path class="icon-plus-v" d="M10.5 19l17 0"></path>
<path class="icon-plus-h" d="M19 10.5l0 17"></path>
</symbol>
<symbol viewBox="0 0 38 38" id="icon-minus">
<title>Hide</title>
<path class="icon-plus-v" d="M10.5 19l17 0"></path>
</symbol>
<!-- vert and hori combined make up the plus icon and allow for animation -->
<symbol viewBox="0 0 38 38" id="icon-vert">
<path d="M19 10.5l0 17"></path>
</symbol>
<symbol viewBox="0 0 38 38" id="icon-hori">
<path d="M10.5 19l17 0"></path>
</symbol>
</defs>
</svg>
<main class=-modal>
<h1>FAQ using <abbr title="Accessible Rich Internet Applications">ARIA</abbr> roles to meet <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2 level AA</h1>
<dl class="dl-faq">
<dt data-pab=faq_1><span>Question 1 (short answer)</span></dt>
<dd id=faq_1>
<div>
<p>Answer to question 1.</p>
<p>Lorem ipsum dolor sit amet, an mei patrioque persequeris, id ullum mollis eligendi nec. Ponderum prodesset no ius, ea simul nobis delenit nam. Meis oporteat accommodare et sed. Case falli doctus no sit. Nisl periculis te mea.</p>
</div>
</dd>
<!-- adding data-pab-expand will force section open by default -->
<dt data-pab=faq_2 data-pab-expand><span>Question 2 (open by default)</span></dt>
<dd id=faq_2>
<div>
<p>Answer to question 2.</p>
<p>In pri mollis tractatos hendrerit, ea vim ipsum blandit pertinax. At qui doctus referrentur vituperatoribus, nec posse ceteros propriae te, dico alienum pertinacia eam ei. Has appetere antiopam te. Vis tacimates adolescens te. Mei quem disputationi ut.</p>
<p>Sit constituto liberavisse no, senserit moderatius usu ea, has te option persius dissentias. Cu quo graeci eligendi iracundia, harum deleniti repudiare vim ad. Vim dolor fierent at, ius ei consul volumus liberavisse. No vel ferri disputando, ei option omittam cum. Malorum civibus ut vim, ius eripuit prodesset cu, essent ancillae definiebas sit at.</p>
</div>
</dd>
<dt data-pab=faq_3><span>Question 3 (long answer)</span></dt>
<dd id=faq_3>
<div>
<p>Answer to question 3.</p>
<p>Sit constituto liberavisse no, senserit moderatius usu ea, has te option persius dissentias. Cu quo graeci eligendi iracundia, harum deleniti repudiare vim ad. Vim dolor fierent at, ius ei consul volumus liberavisse. No vel ferri disputando, ei option omittam cum. Malorum civibus ut vim, ius eripuit prodesset cu, essent ancillae definiebas sit at.</p>
<p>Consul deserunt sea an, usu in sumo wisi menandri, est autem libris constituam no. Populo inimicus duo cu, vim simul numquam at. Ei eos vero doctus vituperatoribus, justo utamur vulputate et vis. Ex justo dolorem voluptua est. Per graeco scripserit ut, labore luptatum quaerendum cu eam. Agam harum adolescens id qui, ex quod detracto pertinax pri, mazim apeirian pro ad.</p>
<p>In pri mollis tractatos hendrerit, ea vim ipsum blandit pertinax. At qui doctus referrentur vituperatoribus, nec posse ceteros propriae te, dico alienum pertinacia eam ei. Has appetere antiopam te. Vis tacimates adolescens te. Mei quem disputationi ut.</p>
</div>
</dd>
</dl>
<h2>How it works</h2>
<p>Takes a <code>dl</code> list and wraps each <code>dt</code> content with a <code>button</code>. The <code>dt</code> is targeted by the <code>data-pab</code> attribute which has the value of the <code>id</code> of the <code>dd</code> to show or hide.</p>
<p>Adding the data attribute <code>data-pab-expand</code> to a <code>dt</code> will expand a <code>dd</code> on page-load.</p>
<p>If a <abbr title="Uniform Reference Locator">URL</abbr> fragment identifier matches the <code>id</code> of a FAQ <code>dd</code> then it is expanded on page-load.</p>
<p>The code is very semantically written with one caveat. Only a single <code>dd</code> per <code>dt</code> is allowed, which is fine for an FAQ, but not for a dictionary which would require multiple responses.</p>
<p>Mike Foskett @ <a href="https://websemantics.uk/">webSemantics</a></p>
</main>
<script src=js/accessible-faq.1.0.min.js></script>
<!-- -->
<!--
<script src=js/accessible-faq.1.0.js></script>
-->
</body>
</html>