Enhance accessibility to meet WCAG 2.0 compliance - automate compliance checking

[jcohen02]

The site should meet accessibility guidelines and be WCAG 2.0 compliant.

This will require some updates.

Compliance checking should then ideally be added into the GHA pipeline so that future changes that are non-compliant are flagged.

• WCAG 2 Overview/
• Understanding accessibility requirements for public sector bodies (PSBAR?)

[mjaquiery]

We might want to use jest-axe in our component tests: https://github.com/nickcolley/jest-axe?tab=readme-ov-file#testing-react-with-react-testing-library

[eatyourgreens]

WAVE is a very good tool for manually checking pages eg. https://wave.webaim.org/report#/https://train.oxrse.uk/material/HPCu/software_architecture_and_design/object_orientated/classes

[eatyourgreens]

Accessibility Insights is also a great tool for Chrome and Edge. It will walk you through a WCAG 2 audit, and integrates with GitHub so that you can open issues for any problems that you find. https://accessibilityinsights.io/

Here's an example of an issue that it created: https://github.com/zooniverse/front-end-monorepo/issues/1597

[eatyourgreens]

The Nomensa Accessibility Statement Generator lists all the WCAG 2 AA success criteria. Tick/untick the ones that apply, and it will generate an accessibility statement that you can publish on the web site.

[eatyourgreens]

I ran a random course materials page through a Lighthouse check on Page Speed Insights and the results are pretty good, for Next.js. Performance is 69% and Accessibility scores 78%. This is without the PRs that merged yesterday, which should nudge the accessibility score up.

https://pagespeed.web.dev/analysis/https-train-oxrse-uk-material-HPCu-introductory_courses-python-07_pandas_dataframes/xdjephxfsy?form_factor=desktop

[eatyourgreens]

Yale have a useful Easy Checks Protocol for manual testing, based on WCAG.