Assess and improve accessibility

[YvonneKallberg]

I think that we should spend some time on evaluating and improving accessibility of the website. I attended a webinar by EBI on this topic (https://www.ebi.ac.uk/training/events/web-accessibility/) where they talked about using WAVE. There are other tools as well but I rather go with something that someone has used, and EBI has a heavy weight in my world.

[LianeHughes]

Wave is really good. Very clear and easy to use, to I think it's a very good choice. Other tools can be used to help to resolve issues that WAVE highlights, but WAVE should be the primary

[LianeHughes]

We went through the Data Platform with WAVE and it worked really well. We recommend doing the same with the RDM guidelines. It's good to use the WAVE plugin for checking. If you work though all of the 'errors', then we will be mostly compliant with WCAG2.1 (https://www.w3.org/TR/WCAG21/) and WCAG 2.2 (which is the higher standard). It's also important that we look over the requirements and check them ourselves (as WAVE cannot test everything). We are looking at a tool called Pa11y (https://pa11y.org) too, which we can use to do assessments (where possible). We are testing it on the Platform, and will loop back when we have tested it.

[LianeHughes]

Please note that, even with Pa11y (or a similar tool), we should do regular assessments manually (perhaps every 6 months is enough, given the current rate of content?)

[YvonneKallberg]

I've worked through the wave errors and most of the alerts:

• Aqua color on links doesn't work due to contrast errors, so now it is teal everywhere but in H1 headers on homepage.
• Teal color in text doesn't separate (stand out) that well in sentences, so I added an underline
• The right-hand side cards are now linked all over, since there was an alert on duplicate links (header and 'Go to...')
• I separated Jobs and Calls into 2 cards. Note that we now don't have a spare color for the former 'Meet a DS'.

Things I can't fix:

• There's one error on the contact form (layouts contact list.html) concerning 'Missing form label' on/around the recaptcha form. I don't know how to solve this, or if it is necessary to solve.
• There are alerts on PDFs and YouTube links. For PDFs I've added '(PDF)' to make it clear, I don't think we can do better than that. For YouTube the complaint is that we should make sure that there are 'synchronized captioning'. I'm not sure there's anything we can do to increase accessibility for these.
• There are also alerts regarding 'Missing field set' on the left-hand radio buttons/filters on resources page. The reference text says: "Determine whether the grouping of check boxes or radio buttons has or needs text that explains the purpose of the check boxes or radio button grouping. If so, mark up the group within a fieldset and put the group description in a legend element." Is it necessary or not?

Not really part of the Wave fixes, but I think concerns accessibility:

• Resources page: type 'buttons' are now color coded (grape - guidance, teal - training, dark-grey - tool). In the event that a new type is introduced (or a typo in existing type), these will be lime color with black text.
• Resource page: made a temporary/ugly fix so that the left-hand filters for Phases and Levels are in more logical order rather than alphabetical order. The fix requires that the 2 first resources in resources.json file doesn't change, hence ugly...

[annaasklof]

• Error on recaptha form - this has been solved for the platform. Look for solution there.

• Alerts on PDFs and YouTube links - ignore this for now

• Alerts regarding 'Missing field set' on the left-hand radio buttons/filters on resources page - leave as is for now as resources might be subject to change. Check accessibility once page is changed.

• Resources page: type 'buttons' are now color coded - leave as is for now as resources might be subject to change. Check accessibility once page is changed.

• Resource page: made a temporary/ugly fix - leave as is for now as resources might be subject to change. Check accessibility once page is changed.

[YvonneKallberg]

I tried to fix the missing label errors regarding recaptcha, by copying solution from data platform, but the solution results in 2 alerts instead, about 'orphaned form label'. ("A form label is present, but it is not correctly associated with a form control.")

This is also alerts on data platform, is it really okay, or is there a better solution?

[YvonneKallberg]

Current solution on recaptcha seems to be the best one. I've created a draft PR so that we don't accidently merge and release before all interviews are done (and we might want to fix Resources more as well).