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 — Underline links for readability and a11y by hugovk · Pull Request #160 · python/python-docs-theme

Conversation

@hugovk

@hugovk hugovk commented Oct 18, 2023 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Member

Currently this theme changes the colour of hyperlinks but doesn't underline them.

For example: https://docs.python.org/3/whatsnew/3.12.html

image

When hovering over a link, it changes colour and a link is shown (see "f-strings" here):

image

However, links should always be underlined. This improves accessibility and also readability.

For example:

  • https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/mouse-and-keyboard-events/links/do-not-remove-the-underline-from-links/
  • https://adrianroselli.com/2019/01/underlines-are-beautiful.html

Not using underlines also fails a WCAG check:

  • https://www.w3.org/TR/WCAG20-TECHS/F73.html

And GitHub have just enabled underlines:

  • https://github.blog/changelog/2023-10-18-new-default-underlined-links-for-improved-accessibility/

Demo

https://python-docs-theme-previews--160.org.readthedocs.build/en/160/whatsnew/3.12.html

image image

Sorry, something went wrong.

Uh oh!

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

latk reacted with heart emoji
All reactions
  • ❤️ 1 reaction
@hugovk
Underline links for readability and a11y
cc74a74
ncoghlan
ncoghlan approved these changes Oct 19, 2023
View reviewed changes
@ncoghlan

ncoghlan commented Oct 19, 2023

Copy link
Copy Markdown
Contributor

@hugovk I was about to hit merge on this, but then I wondered: Should we tag it for backport to the active maintenance branches as well?

Personally, I'm not seeing a downside to doing that, and a whole lot of benefits.

All reactions

Sorry, something went wrong.

Uh oh!

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

@hugovk

hugovk commented Oct 19, 2023

Copy link
Copy Markdown
Member Author

Yes, using this on the active maintenance branches is good.

Note we're in the https://github.com/python/python-docs-theme repo, not https://github.com/python/cpython. We'll release this theme to PyPI, and then it'll be used by the backport branches the next time they rebuild:

  • main: https://github.com/python/cpython/blob/e9b5399bee7106beeeb38a45cfef3f0ed3fdd703/Doc/requirements.txt#L18
  • 3.12: https://github.com/python/cpython/blob/68a5640a362be4f787f3da0e76cd174f7a458a4b/Doc/requirements.txt#L17
  • 3.11: https://github.com/python/cpython/blob/26a028269b807d599ea2f5fa266fccfd1421775b/Doc/requirements.txt#L17
All reactions

Sorry, something went wrong.

Uh oh!

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

@ezio-melotti
ezio-melotti requested a review from pradyunsg October 19, 2023 14:43
@ezio-melotti

ezio-melotti commented Oct 19, 2023 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Member

I find the screenshot with underlines "noisier" than the current one, and I suspect the underlines were not added to the docs' theme in the first place for similar reasons. Wikipedia also doesn't have underlines and cites possible confusion when a link contains underscores (it might have a setting to still enable underlines though).

Given that both our docs and Wikipedia are rich in links, and that -- especially for our docs -- there are often underscores in the text of the links, do the guidelines that suggest adding underlines still apply?

For reference, here are a couple of examples of underlined links that contain underscores:
image
image

Perhaps the contrast could be tweaked instead, or a lighter/different (e.g. dotted) underline could be used instead? Another solution could be to do like GitHub did and add them as an option, but that requires more work.

All reactions

Sorry, something went wrong.

Uh oh!

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

@hugovk

hugovk commented Oct 19, 2023

Copy link
Copy Markdown
Member Author

Good point, let's consider narrowing/lowering the underline, and see how GitHub and MDN do it.

All reactions

Sorry, something went wrong.

Uh oh!

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

@hugovk
hugovk marked this pull request as draft October 19, 2023 16:38
@hugovk
Redunce underline thickness, move underline down, increase line height
071911e
@hugovk

hugovk commented Nov 4, 2023 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Member Author

Updated to make the underline thinner, move it down a bit, and also increase the line height so it better fits in the gap.

"Line height (line spacing) to at least 1.5 times the font size" is also one of the WCAG 2.1 guidelines, and improves accessibility through readability.

https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

Here's how the earlier snippets with underscores look:

image image

And from What's New in 3.13:

image

And from What's New in 3.12:

image

How does this look?

All reactions

Sorry, something went wrong.

Uh oh!

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

@ezio-melotti

ezio-melotti commented Nov 4, 2023 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Member

This is definitely better and solves the potential confusion with underscores. I'm now -0 (from -1) on this since I still prefer the version without underlines, but if others prefer the underlines I'm fine with the change.

All reactions

Sorry, something went wrong.

Uh oh!

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

ezio-melotti
ezio-melotti reviewed Nov 4, 2023
View reviewed changes
Comment thread python_docs_theme/static/pydoctheme.css Resolved

Uh oh!

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

pradyunsg
pradyunsg reviewed Nov 5, 2023
View reviewed changes
Comment thread python_docs_theme/static/pydoctheme.css Resolved

Uh oh!

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

@hugovk @pradyunsg
Only underline actual links rather than placeholder links
a5ca1f5
Co-authored-by: Pradyun Gedam <[email protected]>
@hugovk
hugovk marked this pull request as ready for review November 12, 2023 11:41
pradyunsg
pradyunsg approved these changes Dec 20, 2023
View reviewed changes
@pradyunsg
pradyunsg merged commit d1e6df4 into python:main Dec 20, 2023
@hugovk
hugovk deleted the underline-links branch December 20, 2023 15:55
@hugovk hugovk mentioned this pull request Jan 27, 2024
Reduce underline offset #166
Merged
@egeakman

egeakman commented Jan 29, 2024 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown

Hi there @hugovk. Is there Discourse discussion for this? I believe there should be a discussion first. I would like to hear people's opinions.

All reactions

Sorry, something went wrong.

Uh oh!

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

@hugovk

hugovk commented Jan 30, 2024

Copy link
Copy Markdown
Member Author

There wasn't a discussion for this, just this PR that was open for two months before merge, and one month before release.

This was prompted by GitHub recently adding underlines for accessibility. In addition to approvals here, core devs were in support (on Discord), and some said underlines help with poor eyesight or colourblindness.

Some references:

  • https://www.w3.org/TR/WCAG20-TECHS/F73.html
  • https://adrianroselli.com/2016/06/on-link-underlines.html
  • https://www.nngroup.com/articles/guidelines-for-visualizing-links/
All reactions

Sorry, something went wrong.

Uh oh!

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

@denballakh denballakh mentioned this pull request Jan 31, 2024
Disable underlined links #168
Closed
This was referenced Feb 2, 2024
Do not underline navigation links #169
Merged
Only apply underline offset to code formatting for underline visibility #171
Merged
@hugovk hugovk mentioned this pull request Aug 21, 2024
Create the Python Docs Editorial Board static site using Hugo python/editorial-board#13
Merged
@pradyunsg pradyunsg mentioned this pull request Apr 14, 2026
Improve how whitespace & line height is handled in the stylesheets #289
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ezio-melotti ezio-melotti ezio-melotti left review comments
@ncoghlan ncoghlan ncoghlan approved these changes
@pradyunsg pradyunsg pradyunsg approved these changes

Uh oh!

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

Assignees

No one assigned

Labels

None yet

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.

5 participants

@hugovk @ncoghlan @ezio-melotti @egeakman @pradyunsg
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.