GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — doc: underline links by Trott · Pull Request #50481 · nodejs/node

Conversation

@Trott

@Trott Trott commented Oct 30, 2023 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
@nodejs-github-bot

nodejs-github-bot commented Oct 30, 2023

Copy link
Copy Markdown
Collaborator

Review requested:

  • @nodejs/nodejs-website
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@nodejs-github-bot nodejs-github-bot added the doc Issues and PRs related to Node.js documentation. 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
@Trott
Trott force-pushed the doc-underline-links branch from be33bb1 to 4b72008 Compare October 30, 2023 23:03
ovflowd
ovflowd approved these changes Oct 30, 2023
View reviewed changes

@ovflowd ovflowd left a comment

Copy link
Copy Markdown
Member

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.

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!

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
@Trott Trott added the author ready PRs with CI started, the required approvals, and no outstanding review comments. label Oct 30, 2023
MoLow
MoLow approved these changes Oct 31, 2023
View reviewed changes
AugustinMauroy
AugustinMauroy approved these changes Oct 31, 2023
View reviewed changes

@AugustinMauroy AugustinMauroy left a comment

Copy link
Copy Markdown
Member

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.

LGTM

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
All reactions
bmuenzenmeyer
bmuenzenmeyer approved these changes Oct 31, 2023
View reviewed changes
anonrig
anonrig approved these changes Oct 31, 2023
View reviewed changes
tniessen
tniessen approved these changes Oct 31, 2023
View reviewed changes
aymen94
aymen94 approved these changes Oct 31, 2023
View reviewed changes
bnb
bnb approved these changes Oct 31, 2023
View reviewed changes
@Trott Trott added the commit-queue PRs queued for automated landing through the Commit Queue. label Oct 31, 2023
lpinca
lpinca approved these changes Oct 31, 2023
View reviewed changes
@Trott

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:

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.)
tniessen reacted with heart emoji
All reactions
  • ❤️ 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
@nodejs-github-bot nodejs-github-bot removed the commit-queue PRs queued for automated landing through the Commit Queue. label Nov 1, 2023
@nodejs-github-bot
nodejs-github-bot merged commit 401ea75 into nodejs:main Nov 1, 2023
@nodejs-github-bot

nodejs-github-bot commented Nov 1, 2023

Copy link
Copy Markdown
Collaborator

Landed in 401ea75
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.
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 <[email protected]>
Reviewed-By: Moshe Atlow <[email protected]>
Reviewed-By: Yagiz Nizipli <[email protected]>
Reviewed-By: Tobias Nießen <[email protected]>
Reviewed-By: Tierney Cyren <[email protected]>
Reviewed-By: Luigi Pinca <[email protected]>
@targos targos mentioned this pull request Nov 12, 2023
v21.2.0 release proposal #50681
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 <[email protected]>
Reviewed-By: Moshe Atlow <[email protected]>
Reviewed-By: Yagiz Nizipli <[email protected]>
Reviewed-By: Tobias Nießen <[email protected]>
Reviewed-By: Tierney Cyren <[email protected]>
Reviewed-By: Luigi Pinca <[email protected]>
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 <[email protected]>
Reviewed-By: Moshe Atlow <[email protected]>
Reviewed-By: Yagiz Nizipli <[email protected]>
Reviewed-By: Tobias Nießen <[email protected]>
Reviewed-By: Tierney Cyren <[email protected]>
Reviewed-By: Luigi Pinca <[email protected]>
@UlisesGascon UlisesGascon mentioned this pull request Dec 12, 2023
v20.11.0 proposal #51124
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bmuenzenmeyer bmuenzenmeyer bmuenzenmeyer approved these changes
@bnb bnb bnb approved these changes
@lpinca lpinca lpinca approved these changes
@anonrig anonrig anonrig approved these changes
@tniessen tniessen tniessen approved these changes
@MoLow MoLow MoLow approved these changes
@ovflowd ovflowd ovflowd approved these changes
+2 more reviewers
@aymen94 aymen94 aymen94 approved these changes
@AugustinMauroy AugustinMauroy AugustinMauroy approved these changes
Reviewers whose approvals may not affect merge requirements

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

author ready PRs with CI started, the required approvals, and no outstanding review comments. doc Issues and PRs related to Node.js documentation.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

11 participants

@Trott @nodejs-github-bot @bmuenzenmeyer @bnb @lpinca @anonrig @tniessen @MoLow @ovflowd @aymen94 @AugustinMauroy
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.