Accessibility fixes

[palewire]

I ran a Lighthouse test on the site and found a few small accessibility bugs. Things like this:

I used an accessibility site to tune things up a bit, like so

The results are in this pull request. Every page except widgets should get a 100 Lighthouse score on accessibility after this is merged. The bug on widgets is in the underlying bootstrap library's gray code snippet background color. I figured got into bootstrap was beyond the scope of what we should do here.

[krassowski]

Could you add before/after screenshots for relevant places, please?

[krassowski]

Also CC @isabela-pf and @tonyfast as this one tackles accessibility :)

[palewire]

Here are the three big changes, before and after.

Buttons

Footer links

Card headers

Here's the hidden tag stuff

[palewire]

@krassowski ☝️

[krassowski]

I would approve lang and alt stuff immediately, but the colour changes may need a bit more discussion. I am not convinced by the use of dark colours for text - they do not look as nice. There are other ways to address contrast issues without "breaking" the visuals (speaking as a partially colourblind person annoyed by changes made in many applications because the blunt/lazy way those were performed restrict the colour space used and make it harder to use the app overall):

• using bold (or semi-bold) font style
• changing background color (see Update UI with accessible color contrast jupyterlab/jupyterlab#8832 for the colour updates we applied in JupyterLab) - this would need a green light from a larger group of people, including @isabela-pf and maybe someone from the council, as these are the Jupyter brand colors after all (still I think that using dark colors like proposed is against current brand guidelines)
• using text-shadow or outline to increase contrast of the text without changing the colour of the larger background (see this discussion and this website).

without text shadow:

with text-shadow: 0 0 2px #757575 (the third argument is the blur radius; adjusting the blur radius and color can give even better results; I would personally use 1.5px):

And example on buttons:

none:

text-shadow: 0 0 2px #79340f;: (darkened by 50%)

text-shadow: 0 0 4px #c25419;; (darkened by 20% to just meet 4.5:1 threshold, compensating with a larger radius)

[palewire]

@krassowski I did that for you in #441

[isabela-pf]

Just letting you know I'm looking at this now. Thanks for your patience!

[isabela-pf]

First off, thanks again for exploring this work. It’s always easier to jump on board when someone else gets this started!

Second, I do think everything proposed above works in terms of compliance. Both changing text color and/or adding text shadows will increase contrast, I just think they don’t fit quite as well with the Jupyter branding guidelines so I think they risk not being merged or getting overwritten in the future. But I’m not here to complain and not provide another option, so here are some ideas of what we could do (based on the examples @palewire so kindly showed above).

My most common recommendation is to adjust the background colors instead of the text.

Proposals

Grey

Most of the greys in the brand guide do pass AA regular text contrast with white text

Grey	Pass/Fail AA regular text contrast with white text
#4d4d4d	Pass
#616161	Pass
#757575	Pass
#9e9e9e	Fail

so I think the easiest change for some of these may be to replace #9e9e9e greys with one of the other options if it is used in a non-decorative element. For example, the website footer’s background grey could be set to #757575.

Blue

As for the blue used in the cards, I genuinely don’t know where that color is coming from (the closest options I found were in this secondary brand color issue.

Since I don’t see it in the brand though, that likely means we can adjust the shade of blue if we want it to look closer to the current styling to keep the white text. Muddling around gave me #0C7BC6 which has a similar tone but is a little darker than the current #2e9be4.

Buttons

The buttons are trickier because we definitely can’t change the orange without larger approval and that orange does not play nice with light or dark colors. The dark text passes, but I still don’t find it easy to read. The text shadow also technically works, but since we don’t use it anywhere else in the interface I think there’s a chance it could get overwritten in the future as inconsistent styling. They’re probably the best short-term options though.

Another approach (possibly outside the scope of this PR) would be to have a mostly grey button with orange decorative detail so that it does not need to have sufficient contrast. I'm thinking something along these lines:

As a quick list

Suggestions include:

• Change all #9e9e9e or other greys not passing contrast to one of the other three brand greys (#4d4d4d, #616161, or #757575 depending on context.
• Change documentation cards’ shade of blue to be darker. One suggestions is to make it #0C7BC6.
• There are a few different options for buttons. I prefer either the text shadow or making them grey with a orange, decorative detail.

Let me know if you have any thoughts or questions on this!

[palewire]

Thanks for this feedback, @isabela-pf. I will withdraw this pull request and submit a future patch that complies with your advice.