-
Notifications
You must be signed in to change notification settings - Fork 5.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New web design and clean up documentation #1728
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
} | ||
|
||
pre { | ||
background: #ddd; | ||
/* background: rgba(36, 126, 233, 0.03); */ | ||
background: rgba(36, 126, 233, 0.1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You mean for the color:
right? If so, done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With cursory review (lot of changes, hard to look for any problems in particular), LGTM.
I've already uploaded it to the main website https://deno.land/