Improve accessibility of the theme

[choldgraf]

As @betatim mentioned in one of the jupyter repositories, there are some basic accessibility issues with this theme (things like contrast etc). We should make sure that we hit the low-hanging fruit here. For example, here's a quick analyzer of the theme's accessibility:

http://wave.webaim.org/report#/http://z2jh.jupyter.org/en/latest/

I believe that @betatim also used the tota11y tool which may have found some other a11y issues as well.

[betatim]

In the PR to use this theme for repo2docker I looked at what tota11y had to say, expecting it to be super happy. It pointed out that the grey (in the horizontal menu bar) and some of the other highlight colours don't have enough contrast with the background at the font size used. It also suggests an alternative colour (looks basically the same to me).

How did the colours get chosen and should I make a PR with the alternatives that tota11y suggested?

[choldgraf]

I'm +1 on alternative colors if they look very similar and improve accessibility :-)

[jorisvandenbossche]

Thanks for looking into this!

How did the colours get chosen and should I make a PR with the alternatives that tota11y suggested?

I don't think there was much of a thought process in choosing the colors. Some of them are just bootstrap defaults for a light navbar (like the top bar), some of them are leftovers from copying some css from our old pandas (nature) theme (like the color of the links). The color to indicate the "active" menu items is actually a color from the pandas logo, so this should probably moved to pandas specific css customizations in the pandas repo, and take something standard for in the base theme.

So a PR is very welcome!

[betatim]

This is what tota11y looks like when you use it.

For the colours: the "Home", "Guides", etc is in #808080 which doesn't have enough contrast so the suggestion is to use #767676

The red-ish repo2docker is in #e83e8c and the suggested alternative is #e21181.

(parking the values here for when I have a moment to make a PR)

[bollwyvl]

tota11y looks really great, and could certainly be rolled into the interactive development process. however, unless it's part of an automated processes, it's hard to catch regressions.

Lighthouse (built into chrom*) can used locally, as well as as a service against a URL: this Github action provides a fairly straightforward way to integrate running some baseline accessibility checks. It also handles things like performance, mobile, and SEO, which aren't bad in their own right! I'll have a look-see at integrating that... and maybe fix a few things it catches.

More expansive tools, like WAVE can go further, and there are some integration tools, e.g. robotframework-wavelibrary that (used to) make it pretty straightforward to integrate... though I haven't tried using it since all the firefox extension stuff changed.

[bollwyvl]

Folks: cracked open #292 to maybe jumpstart the conversation around moving this forward!

[12rambau]

We are now relying on Lighthouse for a11y, should we close this issue ?

[choldgraf]

I'm +1 on closing this and opening more targeted accessibility issues as they arise