summaryrefslogtreecommitdiff
path: root/site
diff options
context:
space:
mode:
authorstuebinm2021-04-08 15:28:40 +0200
committerstuebinm2021-04-08 15:28:40 +0200
commit215ca162c2c767df56a4802ed7edde7fd5e7fbd0 (patch)
tree2aa7783eb1c413acdb3ac656ffce4ecbe46af3e2 /site
parentb44b99592c7faf0e1984875ec5bf03be09e83f5d (diff)
site: implement accessibility hints of WAVE
This implements some accessibility guidelines, as hinted at by WAVE [1]: - labels for textareas - fieldsets for multiple-choice answers One thing that's still missing is a set language, which I guess will be best implemented together with an actual language switcher. [1] https://wave.webaim.org/
Diffstat (limited to 'site')
-rw-r--r--site/index.html42
1 files changed, 25 insertions, 17 deletions
diff --git a/site/index.html b/site/index.html
index ad2d907..5771e94 100644
--- a/site/index.html
+++ b/site/index.html
@@ -57,16 +57,18 @@
}
// for all kinds of multiple-choise like answer spaces
- function mkListSpace(kind, options, qid) {
- let ul = mkElement("ul")
+ function mkListSpace(kind, options, qid, label) {
+ let ul = mkElement("fieldset");
let buttons = options.map((option) =>
mkOption(kind, option, qid)
);
- appendChildren (ul, buttons.map((button) => {
+ appendChildren (ul, [
+ mkElement("legend", label)
+ ].concat(buttons.map((button) => {
let li = mkElement("li");
appendChildren(li, button);
return li;
- }));
+ })));
// return the answer chosen by the user. This function uses
// null to indicate that a choice was invalid, i.e. the form
// is not ready for submission yet.
@@ -84,27 +86,35 @@
}
// for freeform text answers (TODO)
- function mkFreeform (placeholder) {
- let text = mkElement("textarea");
- text.placeholder = placeholder;
+ function mkFreeform (placeholder, text) {
+ let input = mkElement("textarea");
+ let label = mkElement("label", text);
+ input.id = text;
+ label.htmlFor = text;
+ let div = appendChildren(mkElement("div"), [
+ label,
+ input
+ ])
+ input.placeholder = placeholder;
return [
- text,
- () => text.value
+ div,
+ () => input.value
];
}
// essentially a case - of statement over the answerspace type.
// since there is no validation of the config json, it may turn
// out to be a partial function in practice.
- function mkAnswerSpace(space, qid) {
+ function mkQuestion(question) {
+ let space = question.space;
if (space === "YesOrNo") {
- return mkListSpace("radio", ["yes", "no"], qid);
+ return mkListSpace("radio", ["yes", "no"], question.name, question.question);
} if ("Single" in space) {
- return mkListSpace("radio", space.Single, qid);
+ return mkListSpace("radio", space.Single, question.name, question.question);
} if ("Multiple" in space) {
- return mkListSpace("checkbox", space.Multiple, qid);
+ return mkListSpace("checkbox", space.Multiple, question.name, question.question);
} if ("Freeform" in space) {
- return mkFreeform(space.Freeform);
+ return mkFreeform(space.Freeform, question.question);
}
console.err("PartialityError: encountered unknown AnswerSpace type!");
}
@@ -126,11 +136,9 @@
let callbacks = survey.questions.map ((question) => {
let section = document.createElement("section");
let [answerspace, whichselection] =
- mkAnswerSpace(question.space, question.name);
+ mkQuestion(question);
appendChildren(section, [
mkElement("h2", question.name),
- mkElement("p", question.question),
- //mkAnswerSpace(question.space, question.name)
answerspace
]);
root.appendChild(section);