Accessibility updates

[phucduong86]

Details:

• Updated colors for better contrasts
• Update links styling for better consistency and visually discernable from other content type
• Implemented "visually-hidden" CSS class to be able to add off screen content for screen reader users (An example is the 2 "Visit website" links on the /books page will now read "Visit Learning Processing website" and "Visit Nature of Code website" by the screen reader.)
• Added focus style for improve accessibility for keyboard users.
• Turned a few capitalized text to normal text and use CSS to style them. This gives users with reading disabilities the ability to turn off CSS and read normal text. Reference read: https://github.com/humanmade/hm-pattern-library/issues/75

[phucduong86]

Hi Dan,

Here's some screenshots of the main elements. I tried not to change the color scheme too much and just darken the existing colors. The biggest change is the yellow color - it's looking more like a green now the other option is keeping the green but make the text darker. I feel that the later would break the consistency of the color scheme on the right panel.

[shiffman]

Thank you @phucduong86, this is so great! I think the green color probably needs re-thinking but accessibility for me is a higher priority than looking nice. So perhaps we merge this but open a new issue inviting proposals for different color schemes with the contrast requirements?

[phucduong86]

Thank you @phucduong86, this is so great! I think the green color probably needs re-thinking but accessibility for me is a higher priority than looking nice. So perhaps we merge this but open a new issue inviting proposals for different color schemes with the contrast requirements?

That sounds great Dan! Thank you for the review.