Accessibility review

[boonebgorges]

We need an accessibility review of OL-WW. At a glance, it doesn't look awful - a few missing 'alt' attributes and form labels, as well as a couple of contrast issues. Some attention should also be paid to interactive areas and aria-live.

[boonebgorges]

I've finished an initial review.

The markup changes have been minimal. Avatars needed alt text, and a number of form elements (specifically, sidebar filters) needed labels.

In the interest of moving us along, I made a few judgment calls to get us compliant with contrast ratios. Screenshots follow. I'm happy to revisit any of these based on the feedback of @jennaspevack and others - I just thought it'd be easier to start with something concrete :-D

"Top" link - Changed background from #668fcf (our "light blue") to #0044af (our "dark blue"). fc37f41

Footer links - Changed text to white, added underline to define as a link. 9dfd0f8

Course metadata: Nudged a shade darker to get WAVE to pass. c81f1ce

Disabled "vote" icon for logged-out user: Nudged a shade darker. 135321b

[boonebgorges]

Everything on http://openlabdev.org/webwork-playground/ is now passing WAVE's AA check, with the exception of a single image imported from WeBWorK, which is missing an alt tag.

[boonebgorges]

(In logged-out state, that is.)

[jennaspevack]

Color/contrast changes look good to me. Thanks Boone!

[boonebgorges]

Thanks, Jenna!!

I'll leave this ticket open for any necessary WAVE testing from the team.

[bree-z]

I did a WAVE test, and see the following errors:

• 9 images with missing alt text (all from questions/images posted this week).
• 1 missing form label (from this question, which has a dropdown at the bottom for the question "Which graph matches the given function?")

I also see 3 contrast errors, all in the footer, which looks different for me than the screenshot above:

[boonebgorges]

Thanks, Bree - if I understand correctly, all of the current errors (missing alt text and missing form label) are errors in the source content on WeBWorK. As a general rule, there's not much we can do in an automated fashion to fix the markup that comes from WeBWorK - it must be fixed there instead.

In the case of problem images, I could generate some dummy text - something like "Image for problem xyz". This would fool the WAVE tool, though I'm unsure whether it'd solve any actual accessibility problems.

The contrast errors appear to be caused by the recent update to the Hemingway theme. I've reinstated the fixes in https://github.com/livinglab/openlab/commit/8e307a56d08b9b892e63f76a7e38e5a37226fe43, and the

[bree-z]

Thanks, Boone! That's what I thought re content from WeBWorK, but thought I'd mention it just in case. :)

I don't know what's involved in fixing it on the WeBWorK side, but that seems like the more effective thing to work towards rather than generating dummy text; not sure what others think though.

And, the contrast errors are all gone!