Skip to content
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.

Sign up for GitHub

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

Jump to bottom

doc: underline links #50481

Merged
merged 1 commit into from
Nov 1, 2023
Merged

doc: underline links #50481

merged 1 commit into from
Nov 1, 2023

Conversation

Trott
Copy link
Member

@Trott Trott commented Oct 30, 2023 •
edited
Loading

The current use of color only to differentiate links fails WCAG A accessibility standards.

Possible solutions are:

  1. Using a text indicator to show that the text is a link.
  2. Using additional cues (such as underlining).
  3. Providing color contrast of 3:1 or greater with surrounding text (not the background--the adjacent text!) along with visual cues on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182

@nodejs-github-bot
Copy link
Collaborator

Review requested:

  • @nodejs/nodejs-website

@nodejs-github-bot nodejs-github-bot added the doc Issues and PRs related to the documentations. label Oct 30, 2023
@Trott
doc: underline links
4b72008 
The current use of color only to differentiate links fails WCAG A
accessibility standards.

Possible solutions are:

1. Using a text indicator to show that the text is a link.
2. Using additional cues (such as underlining).
3. Providing color contrast of 3:1 or greater with surrounding text
   (not the background--the adjacent text!) along with visual cues
   on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
ovflowd
ovflowd approved these changes Oct 30, 2023
View reviewed changes
Copy link
Member

@ovflowd ovflowd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems such a trivial enough change, that it definitely brings more benefits as outlined by Rich, even tho these API docs are due to a redeisgn.

Thanks for the effort of making this change and bringing relevant docs, Rich!

@Trott Trott added the author ready PRs that have at least one approval, no pending requests for changes, and a CI started. label Oct 30, 2023
AugustinMauroy
AugustinMauroy approved these changes Oct 31, 2023
View reviewed changes
Copy link
Contributor

@AugustinMauroy AugustinMauroy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Trott Trott added the commit-queue Add this label to land a pull request using GitHub Actions. label Oct 31, 2023
@Trott
Copy link
Member Author

Trott commented Nov 1, 2023

We may want to revise this later to improve the aesthetics, but I think it's better to make it accessible first and then figure out how to make it look better.

In a lot of cases, adding the underlining looks just fine:

image

But it can be a bit much when everything is a link:

image

(Or maybe all that underlining is fine. I don't know.)

@nodejs-github-bot nodejs-github-bot removed the commit-queue Add this label to land a pull request using GitHub Actions. label Nov 1, 2023
@nodejs-github-bot nodejs-github-bot merged commit 401ea75 into nodejs:main Nov 1, 2023
19 checks passed
@nodejs-github-bot
Copy link
Collaborator

Landed in 401ea75

anonrig pushed a commit to anonrig/node that referenced this pull request Nov 9, 2023
@Trott @anonrig
doc: underline links
0f12bda 
The current use of color only to differentiate links fails WCAG A
accessibility standards.

Possible solutions are:

1. Using a text indicator to show that the text is a link.
2. Using additional cues (such as underlining).
3. Providing color contrast of 3:1 or greater with surrounding text
   (not the background--the adjacent text!) along with visual cues
   on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
PR-URL: nodejs#50481
Refs: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Refs: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Refs: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
targos pushed a commit that referenced this pull request Nov 11, 2023
@Trott @targos
doc: underline links
aa4dae5 
The current use of color only to differentiate links fails WCAG A
accessibility standards.

Possible solutions are:

1. Using a text indicator to show that the text is a link.
2. Using additional cues (such as underlining).
3. Providing color contrast of 3:1 or greater with surrounding text
   (not the background--the adjacent text!) along with visual cues
   on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
PR-URL: #50481
Refs: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Refs: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Refs: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
@targos targos mentioned this pull request Nov 12, 2023
Merged
targos pushed a commit that referenced this pull request Nov 14, 2023
@Trott @targos
doc: underline links
886fc48 
The current use of color only to differentiate links fails WCAG A
accessibility standards.

Possible solutions are:

1. Using a text indicator to show that the text is a link.
2. Using additional cues (such as underlining).
3. Providing color contrast of 3:1 or greater with surrounding text
   (not the background--the adjacent text!) along with visual cues
   on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
PR-URL: #50481
Refs: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Refs: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Refs: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
UlisesGascon pushed a commit that referenced this pull request Dec 11, 2023
@Trott @UlisesGascon
doc: underline links
5d48ef7 
The current use of color only to differentiate links fails WCAG A
accessibility standards.

Possible solutions are:

1. Using a text indicator to show that the text is a link.
2. Using additional cues (such as underlining).
3. Providing color contrast of 3:1 or greater with surrounding text
   (not the background--the adjacent text!) along with visual cues
   on hover.

The solution here implements the second option.

Ref: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Ref: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Ref: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
PR-URL: #50481
Refs: https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Refs: https://www.w3.org/WAI/WCAG21/Techniques/failures/F73
Refs: https://www.w3.org/WAI/WCAG21/Techniques/general/G182
Reviewed-By: Claudio Wunder <cwunder@gnome.org>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com>
Reviewed-By: Tobias Nießen <tniessen@tnie.de>
Reviewed-By: Tierney Cyren <hello@bnb.im>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
@UlisesGascon UlisesGascon mentioned this pull request Dec 12, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AugustinMauroy AugustinMauroy AugustinMauroy approved these changes

@aymen94 aymen94 aymen94 approved these changes

@ovflowd ovflowd ovflowd approved these changes

@MoLow MoLow MoLow approved these changes

@tniessen tniessen tniessen approved these changes

@anonrig anonrig anonrig approved these changes

@lpinca lpinca lpinca approved these changes

@bnb bnb bnb approved these changes

@bmuenzenmeyer bmuenzenmeyer bmuenzenmeyer approved these changes

Assignees
No one assigned
Labels
author ready PRs that have at least one approval, no pending requests for changes, and a CI started. doc Issues and PRs related to the documentations.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.