100devs / course-tracker

A course-tracker for 100Devs

26 stars 9 forks source link

Task 128/129 - Improve UX for A11y #128

Open 3dvkr opened 2 years ago

3dvkr commented 2 years ago

Summary

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

[x] Set-up ESLint and react-axe to audit accessibility issues (see also browser tools)
[x] Test/adjust color contrast
[x] Test/define Aria-labels for buttons/any unclear elements
[x] Test/define heading levels
[x] 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 commented 2 years ago

Combining Task 129 with Task 128