FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

doc: underline links by Trott · Pull Request #50481 · nodejs/node · GitHub

/ node Public

doc: underline links - #50481

Merged
nodejs-github-bot merged 1 commit into
nodejs:mainfrom
Trott:doc-underline-links
Nov 1, 2023
Merged

doc: underline links#50481
nodejs-github-bot merged 1 commit into
nodejs:mainfrom
Trott:doc-underline-links

Conversation

Trott commented Oct 30, 2023
edited
Loading

Copy link
Copy Markdown
Member

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

Copy link
Copy Markdown
Collaborator

Review requested:

  • @nodejs/nodejs-website

nodejs-github-bot added the doc Issues and PRs related to the documentations. label Oct 30, 2023
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
Trott force-pushed the doc-underline-links branch from be33bb1 to 4b72008 Compare October 30, 2023 23:03

ovflowd left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

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 added the author ready PRs that have at least one approval, no outstanding review comments, and a CI started. label Oct 30, 2023

AugustinMauroy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

LGTM

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

Trott commented Nov 1, 2023

Copy link
Copy Markdown
Member Author

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:

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

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

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 merged commit 401ea75 into nodejs:main Nov 1, 2023

Copy link
Copy Markdown
Collaborator

Landed in 401ea75

targos pushed a commit that referenced this pull request Nov 11, 2023
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 pushed a commit that referenced this pull request Nov 14, 2023
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
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 mentioned this pull request Dec 12, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

author ready PRs that have at least one approval, no outstanding review comments, and a CI started. doc Issues and PRs related to the documentations.

Projects

None yet

Development

Successfully merging this pull request may close these issues.


Back | FazBrowse Home | New Git URL