Update MATS for section 508 compliance

[mollybsmith-noaa]

I thought we already had an issue for this, but apparently not! We need to update MATS for accessibility requirements / section 508.

[ian-noaa]

Some notes.

Section 508/accessibility is more commonly known as a11y in the web world.

Accessibility Tooling

• pa11y is used by DESI: https://github.com/pa11y/pa11y
• The WAVE browser plugin was recommended by IDSS Engine: https://wave.webaim.org/extension/
• axe-core has frequently come up: https://github.com/dequelabs/axe-core

Even the best automated tooling only catches ~40% of accessibility issues. Using multiple tools and doing hand audits are recommended.

Resources

• UK guide on accessibility testing: https://accessibility-manual.dwp.gov.uk/best-practice/how-to-do-accessibility-testing
• USWDS tips: https://designsystem.digital.gov/design-principles/#embrace-accessibility
• https://digital.gov/guides/accessibility-for-teams/front-end-development/#content-start
• ITS is planning on sending out a checklist and setting up a monitoring website. We will probably need to meet some NOAA requirements as well. (Disclaimers that this is research data, etc...)

This issue could dovetail with #629 if we need to modify the site's CSS extensively. However, if we can achieve our accessibility goals without modifying the site's CSS, then treating those two issues separately would be ideal. There is also the question of whether Bootstrap or USWDS is the best design system for us to use.

[ian-noaa]

One other resource for this - GSL's Lunch & Learn series on accessibility: https://docs.google.com/document/d/1jfHN6vrQdbNwOyC2e1X71yB-F4jKPSSSALburo0iiAA/edit

[ian-noaa]

Another great resource is 18F's Accessibility guide. They're GSA's software modernization team and are currently working on the rewrite of weather.gov. They've been pushing some best practices for government websites. https://guides.18f.gov/accessibility/

From GSL, we also have the following:

I've been using some free readability scanners to check sites. Most of the issues revolve around colors and some graphics that don't have clear headers. Here is one that I like which gives you some details about what can be done to improve readability for 508 compliance.
https://userway.org/accessibility-checker/
and another one I liked...
https://www.accessibilitychecker.org/
Both sites give free recommendations for your site.

[mollybsmith-noaa]

As of now, MATS has been brought into compliance in the areas of color contrast, image alt text, unique div ids, that USA banner on the top of the page, and the "not operational" disclaimer.