Improve error markup accessibility

1 files changed, 13 insertions, 9 deletions

diff --git a/src/xhtml.cr b/src/xhtml.cr
index 35f9d62..be3d12c 100644
--- a/src/xhtml.cr
+++ b/src/xhtml.cr
@@ -34,7 +34,11 @@ CSS = "
       }
       form label { margin-right: 1ch }
       form input { margin-bottom: 1ex }
-      .error { color: red }
+      .error {
+        color: red;
+        margin-top: -1ex;
+        margin-bottom: 1ex;
+      }
     "
 
 class Page
@@ -82,15 +86,15 @@ class Page
   end
 
   def input(xml, name, label, hint, error, value)
-    if error
-      xml.element "span"
-      xml.element "span", class: "error" do xml.text error end
-      xml.element "br"
-    end
     xml.element "label", for: name do xml.text label end
     xml.element "input", name: name, placeholder: hint, value: value,
                 required: "required"
     xml.element "br"
+    if error
+      xml.element "label", class: "error" do xml.text "Error:" end
+      xml.element "label", class: "error" do xml.text error end
+      xml.element "br"
+    end
   end
 
   def form(xml, errors = {} of String => String,
@@ -98,11 +102,11 @@ class Page
     xml.element "p" do xml.text "Then, please fill out the form below." end
     nick = params.fetch("nick", nil)
     xml.element "form", action: @api_url, method: "POST" do
-      input xml, "nick", "Nickname", "digits or lowercase letters",
+      input xml, "nick", "Nickname:", "digits or lowercase letters",
             errors.fetch("nick", nil), nick || ""
-      input xml, "opennic", "OpenNIC URL", "e.g. http://example.null",
+      input xml, "opennic", "OpenNIC URL:", "e.g. http://example.null",
             errors.fetch("opennic", nil), params.fetch("opennic", "")
-      input xml, "icann", "ICANN URL", "e.g. https://example.net",
+      input xml, "icann", "ICANN URL:", "e.g. https://example.net",
             errors.fetch("icann", nil), params.fetch("icann", "")
       xml.element "span" do
         xml.element "input", type: "hidden", name: "host", value: @static_host