Add aria tags

This commit is contained in:
Yarmo Mackenbach 2021-06-07 11:56:29 +02:00
parent 30aac09032
commit 527768d3ee
No known key found for this signature in database
GPG key ID: 37367F4AF4087AD1
3 changed files with 15 additions and 8 deletions

View file

@ -63,6 +63,7 @@ class Claim extends HTMLElement {
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', '');
subsection_alert_icon.setAttribute('aria-hidden', 'true');
const subsection_alert_text = subsection_alert.appendChild(document.createElement('div'));
const message = subsection_alert_text.appendChild(document.createElement('p'));
@ -76,6 +77,7 @@ class Claim extends HTMLElement {
const subsection_links_icon = subsection_links.appendChild(document.createElement('img'));
subsection_links_icon.setAttribute('src', '/static/img/link.png');
subsection_links_icon.setAttribute('alt', '');
subsection_links_icon.setAttribute('aria-hidden', 'true');
const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
const profile_link = subsection_links_text.appendChild(document.createElement('p'));
@ -101,6 +103,7 @@ class Claim extends HTMLElement {
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
subsection_qr_icon.setAttribute('alt', '');
subsection_qr_icon.setAttribute('aria-hidden', 'true');
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
@ -116,6 +119,7 @@ class Claim extends HTMLElement {
const subsection_status_icon = subsection_status.appendChild(document.createElement('img'));
subsection_status_icon.setAttribute('src', '/static/img/decagram.png');
subsection_status_icon.setAttribute('alt', '');
subsection_status_icon.setAttribute('aria-hidden', 'true');
const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
const verification = subsection_status_text.appendChild(document.createElement('p'));
@ -123,6 +127,7 @@ class Claim extends HTMLElement {
verification.innerHTML = `Claim verification has completed.`;
subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png');
subsection_status_icon.setAttribute('alt', '');
subsection_status_icon.setAttribute('aria-hidden', 'true');
} else {
verification.innerHTML = `Claim verification is in progress…`;
return;
@ -136,6 +141,7 @@ class Claim extends HTMLElement {
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', '');
subsection_result_icon.setAttribute('aria-hidden', 'true');
const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
const result = subsection_result_text.appendChild(document.createElement('p'));
@ -150,6 +156,7 @@ class Claim extends HTMLElement {
const subsection_info_icon = subsection_info.appendChild(document.createElement('img'));
subsection_info_icon.setAttribute('src', '/static/img/information.png');
subsection_info_icon.setAttribute('alt', '');
subsection_info_icon.setAttribute('aria-hidden', 'true');
const subsection_info_text = subsection_info.appendChild(document.createElement('div'));
const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p'));

View file

@ -15,7 +15,7 @@ block content
p.subtitle= demoData.matches[0].serviceprovider.name
p.title= demoData.matches[0].profile.display
.icons
.verificationStatus(data-value='running')
.verificationStatus(data-value='running' aria-hidden='true')
.inProgress
.content
.subsection

View file

@ -1,12 +1,12 @@
header
nav
.spacer
a.text(href='/') Home
a.text(href='/getting-started') Getting started
a.logo(href='/')
img(src='/static/img/logo_circle.png' alt='Keyoxide')
a.text(href='/' aria-label='Go to homepage') Home
a.text(href='/getting-started' aria-label='Go to getting started guide') Getting started
a.logo(href='/' aria-label='Go to homepage')
img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
nav
a.text(href='/about') About
a.text(href='/guides') Guides
a.text(href='/faq') FAQ
a.text(href='/about' aria-label='Go to about page') About
a.text(href='/guides' aria-label='Go to list of guides') Guides
a.text(href='/faq' aria-label='Go to frequently asked questions') FAQ
.spacer