Ensure color matrix is accessible to screenreaders

[jenniferthibault]

Make sure that the color matrix and text is readable by screen readers, and complies with other accessibility standards.

[toolness]

Do you mean that the color matrix should be converted to HTML, so that someone could read it with a screen reader? Or something else?

Coincidentally, I'm working on #64 and making an HTML version of this color matrix is very doable with the CSS I've written so far. Could also help with #85!

[jenniferthibault]

Thanks @toolness !! To capture what we talked about in person here, I meant either getting the text out of the image and into HTML, or adding the appropriate tags to be comprehensible to screen readers.

Love your approach of building the whole shebang in HTML, which will make this element easily reproducible, and get a start on making it responsive. Do you want us to make a mobile mockup for this, or do you already have ideas?

[jenniferthibault]

Transferring assignment over to @rtwell, who was interested in thinking through mobile layout for the matrix with you @toolness .

& @ericronne tapping in for backup review.

[toolness]

Sounds good @jenniferthibault, looking forward to working on the mobile version with you @rtwell!

[rtwell]

here's my first pass, with gentle nudges from @ericronne.
cc @jenniferthibault @thisisdano @amberwreed @toolness

Default view

First color expanded

All expanded

[toolness]

Ooooo NICE! 💯

I like this. Lemme think how best to implement it and I'll attempt to code it up.

Regarding the base color palette (not the combinations)--the existing stylesheet actually does that in a nice responsive way very similar to the one in your mockup above, only it's two color swatches per row instead of three:

Is it ok to keep the existing layout or would you prefer 3 swatches per row?

[toolness]

Ok, so I'm actually getting to be a bit tight on time (I'm starting a new full-time project on Monday), and while your mockups are really awesome, I've implemented something that falls rather short of them, yet are still inspired by them, in #94. I'd still like to implement your original mockups at a later point (someone else can do it too of course) but in the interests of time I'm hoping we can get away with something a bit less cool. Curious to know your thoughts!