Task 128/129 - Improve UX for A11y

[3dvkr]

Summary

Test and improve UX to address accessibility concerns for visibility and screen readers:

• Set-up ESLint and react-axe to audit accessibility issues (see also browser tools)
• Test/adjust color contrast
• Test/define Aria-labels for buttons/any unclear elements
• Test/define heading levels
• Test/define form-control labels
• Aria described by for help-text/errors
• Test/define landmark regions—define using HTML5 elements (1st), or aria roles (2nd)
• Set focus and refs for page loads/changes

Improve UX for Keyboard Navigation

Notes for this section:

• Look into updating the Week divs to something a more semantic HTML element, (e.g. articles).
• They should also be tab-able (use tab-order attribute or ARIA)
• upon focusing, that Week should have an outline to indicate where the users is currently focused (using CSS)
• look into a way to indicate that each Week post is clickable, and opens the post for that week (depending on scope, this could be its own ticket)

Additional notes

Recommended browser ext's for testing (chrome, firefox also avail):
axe DEVtools
https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd/related
tota11y
https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe/related
high contrast
https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph/related
accessible color picker
https://chrome.google.com/webstore/detail/accessible-color-picker/bgfhbflmeekopanooidljpnmnljdihld

[relspeedwagon]

Combining Task 129 with Task 128