From 30aac090328620c90ab9c87cceba8eea617ab33c Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Mon, 7 Jun 2021 11:47:09 +0200 Subject: [PATCH] Improve accessibility --- static/kx-claim.js | 7 +++++++ static/styles.css | 7 +++++-- views/index.pug | 10 +++++----- views/templates/base.pug | 33 ++++++++++++++++++--------------- 4 files changed, 35 insertions(+), 22 deletions(-) diff --git a/static/kx-claim.js b/static/kx-claim.js index 50c6520..1a547e7 100644 --- a/static/kx-claim.js +++ b/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')); diff --git a/static/styles.css b/static/styles.css index 7fa0c0e..bddd53a 100644 --- a/static/styles.css +++ b/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 { diff --git a/views/index.pug b/views/index.pug index 5b19ba9..1bf9c2c 100644 --- a/views/index.pug +++ b/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: diff --git a/views/templates/base.pug b/views/templates/base.pug index 2ef224a..486ef7a 100644 --- a/views/templates/base.pug +++ b/views/templates/base.pug @@ -1,20 +1,23 @@ doctype html -head - meta(charset='utf-8') - meta(name='viewport' content='width=device-width, initial-scale=1') - meta(name='theme-color' content='#fff') - link(rel='shortcut icon' href='/favicon.svg') - title= (title ? title : 'Keyoxide') +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