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/

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);