New web design and clean up documentation #1728
Conversation
There was a problem hiding this comment.
I've used pa11y to check for WCAG - Web Content Accessibility Guidelines and found some contract issues with new theming.
All recommendations are included and it shouldn't be hard to fix.
I would be happy to create a separate PR with those proposed changes if they are out of the current changes scope, as well as to set up pa11y automated tests, as the website seems to become the main source of knowledge for Deno and I believe that cool tech should be accessible for everyone. Thanks for your attention!
website/style.css
Outdated
| box-shadow: 0 0 5px 0 #333; | ||
|
|
||
| a { | ||
| color: #247ee9; |
There was a problem hiding this comment.
Can you change it to #106ad5 to increase contrast and comply with WCAG, please?
Text in the element html > body > main > table > tbody > tr:nth-child(2) > th > a has a contrast ratio of 3.52:1, while expected a contrast ratio of at least 4.5:1.
And also create a new rule for pre a with color: #001631 for the same reason?
Text in the element html > body > main > pre:nth-child(5) > a has a contrast ratio of 1:1 (approximately, I suppose), while expected a contrast ratio of at least 4.5:1.
| } | ||
|
|
||
| pre { | ||
| background: #ddd; | ||
| /* background: rgba(36, 126, 233, 0.03); */ | ||
| background: rgba(36, 126, 233, 0.1); |
There was a problem hiding this comment.
Can you change it to #161616 to increase contrast and comply with WCAG, please?
Text in the element html > body > main > pre:nth-child(12) has a contrast ratio of 2.43:1, while expected a contrast ratio of at least 4.5:1.
There was a problem hiding this comment.
You mean for the color: right? If so, done.
There was a problem hiding this comment.
Yes, sorry, that's right.
website/manual.html
Outdated
| <title>Deno Manual</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <meta | ||
| content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" |
There was a problem hiding this comment.
Please, let's not block users from scaling the website, especially critical on mobile devices in terms of accessibility.
Never use maximum-scale=1.0
Interfering with a user agent's ability to zoom
So, let's remove maximum-scale=1.0 and user-scalable=0 from every page.
There was a problem hiding this comment.
I have already opened #1734 to fix that on index.html, but please, let's not add maximum-scale=1.0 and user-scalable=0 to the manual.html.
all_benchmark.html already has only width=device-width, initial-scale=1.0 as expected.
I've already uploaded it to the main website https://deno.land/