Improve accessibility

static/kx-claim.js

@@ -62,6 +62,7 @@ class Claim extends HTMLElement {
             subsection_alert.setAttribute('class', 'subsection');
             const subsection_alert_icon = subsection_alert.appendChild(document.createElement('img'));
             subsection_alert_icon.setAttribute('src', '/static/img/alert-decagram.png');
+            subsection_alert_icon.setAttribute('alt', '');
             const subsection_alert_text = subsection_alert.appendChild(document.createElement('div'));
 
             const message = subsection_alert_text.appendChild(document.createElement('p'));
@@ -74,6 +75,7 @@ class Claim extends HTMLElement {
         subsection_links.setAttribute('class', 'subsection');
         const subsection_links_icon = subsection_links.appendChild(document.createElement('img'));
         subsection_links_icon.setAttribute('src', '/static/img/link.png');
+        subsection_links_icon.setAttribute('alt', '');
         const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
 
         const profile_link = subsection_links_text.appendChild(document.createElement('p'));
@@ -98,6 +100,7 @@ class Claim extends HTMLElement {
             subsection_qr.setAttribute('class', 'subsection');
             const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
             subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
+            subsection_qr_icon.setAttribute('alt', '');
             const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
 
             const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
@@ -112,12 +115,14 @@ class Claim extends HTMLElement {
         subsection_status.setAttribute('class', 'subsection');
         const subsection_status_icon = subsection_status.appendChild(document.createElement('img'));
         subsection_status_icon.setAttribute('src', '/static/img/decagram.png');
+        subsection_status_icon.setAttribute('alt', '');
         const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
 
         const verification = subsection_status_text.appendChild(document.createElement('p'));
         if (claim.status === 'verified') {
             verification.innerHTML = `Claim verification has completed.`;
             subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png');
+            subsection_status_icon.setAttribute('alt', '');
         } else {
             verification.innerHTML = `Claim verification is in progress…`;
             return;
@@ -130,6 +135,7 @@ class Claim extends HTMLElement {
         subsection_result.setAttribute('class', 'subsection');
         const subsection_result_icon = subsection_result.appendChild(document.createElement('img'));
         subsection_result_icon.setAttribute('src', '/static/img/shield-search.png');
+        subsection_result_icon.setAttribute('alt', '');
         const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
 
         const result = subsection_result_text.appendChild(document.createElement('p'));
@@ -143,6 +149,7 @@ class Claim extends HTMLElement {
             subsection_info.setAttribute('class', 'subsection');
             const subsection_info_icon = subsection_info.appendChild(document.createElement('img'));
             subsection_info_icon.setAttribute('src', '/static/img/information.png');
+            subsection_info_icon.setAttribute('alt', '');
             const subsection_info_text = subsection_info.appendChild(document.createElement('div'));
 
             const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p'));

static/styles.css

@@ -60,6 +60,7 @@ header {
 }
 header a.logo {
   width: 64px;
+  height: 64px;
   margin: 0 0.8rem;
   font-size: 1.6rem;
   text-transform: uppercase;
@@ -329,7 +330,9 @@ footer h1 {
   font-weight: bold;
 }
 footer a {
+  display: inline-block;
   color: var(--purple-100);
+  height: 48px;
 }
 
 code {
@@ -408,8 +411,8 @@ form input[type="radio"] + label:hover {
 }
 form input[type="radio"]:checked + label {
   color: #fff;
-  background-color: var(--purple-500);
-  border: solid 2px var(--purple-500);
+  background-color: var(--purple-600);
+  border: solid 2px var(--purple-600);
 }
 
 input[type="button"], input[type="submit"], button, a.button {

views/index.pug

@@ -1,10 +1,10 @@
 extends templates/base.pug
 
 block js
-  script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
-  script(type='application/javascript' src='/static/doip.js' charset='utf-8')
-  script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8')
-  script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
+  script(type='application/javascript' defer src='/static/openpgp.min.js' charset='utf-8')
+  script(type='application/javascript' defer src='/static/doip.min.js' charset='utf-8')
+  script(type='application/javascript' defer src='/static/kx-claim.js' charset='utf-8')
+  script(type='application/javascript' defer src='/static/scripts.js' charset='utf-8')
 
 block content
   .demo.narrow
@@ -19,7 +19,7 @@ block content
               .inProgress
         .content
           .subsection
-            img(src='/static/img/link.png')
+            img(src='/static/img/link.png' alt='')
             div
               if (demoData.matches[0].profile.uri)
                 p Profile link: 

views/templates/base.pug

@@ -1,20 +1,23 @@
 doctype html
-head
+html(lang='en')
+  head
     meta(charset='utf-8')
     meta(name='viewport' content='width=device-width, initial-scale=1')
     meta(name='theme-color' content='#fff')
+    meta(name='description' content='Modern and secure platform to manage a decentralized identity based on cryptographic keys')
     link(rel='shortcut icon' href='/favicon.svg')
     title= (title ? title : 'Keyoxide')
+
+  include ../partials/header.pug
+
+  main
+    .container
+      block content
+
+  include ../partials/footer.pug
+
   link(rel='stylesheet' href='/static/styles.css')
   link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css' integrity='sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=' crossorigin='anonymous')
   block css
 
-include ../partials/header.pug
-
-main
-  .container
-    block content
-
-include ../partials/footer.pug
-
-block js
+  block js