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 — Do not underline navigation links by hugovk · Pull Request #169 · python/python-docs-theme

Conversation

@hugovk

@hugovk hugovk commented Feb 2, 2024 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Member

Follow on from #160.

Fixes #168.

Accessibility

The lowest level WCAG* 2.0 guidelines (specifically G182) say colour alone shouldn't be used for links. Something else -- like an underline, different font or size, or italics/bold -- must also be used to help identify them.

However, this is mainly for main body text (e.g. words linked in a paragraph or narrative content), not thing like navigation, footers, page controls.

Applicability

Colored text when the color is used to convey information such as:

  • Words that are links in a paragraph
  • Items in a list where some are different than others and are presented in colored text

Description

The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate the different status of words that are part of a paragraph or other block of text or where special characters or graphics cannot be used to indicate which words have special status. For example, scattered words in text may be hypertext links that are marked as such by being printed in a different color. This technique describes a way to provide cues in addition to color so that users who may have difficulty perceiving color differences or have low vision can identify them.

To use this technique, an author incorporates a visual cue in addition to color for each place where color alone is used to convey information. Visual cues can take many forms including changes to the font style, the addition of underlines, bold, or italics, or changes to the font size.

(*There are many international accessibility laws based on WCAG: https://www.w3.org/WAI/policies/)

Usability

Usability guidelines suggest they can be removed from navigation (but if accessibility is not a priority):

  • To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.

  • Assuming the link text is colored, it's not always absolutely necessary to underline it.

    • There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area's function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
    • Exception: underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
    • Exception: underlined links are important for low-vision users' accessibility, so retain underlines if accessibility is a priority for your site or you have many users with low vision.

This PR

Disables underlines for:

  • header navigation
  • footer navigation
  • left menu bar
  • list of links on the homepage
  • list of links in the global module index
  • list of links in the general module index
  • list of links in search results
  • tables of contents
  • edit: and the pilcrow (¶) for linking to headers

Excepts re-enables the underlines when mouse hovers over them (also the pre-#160 behaviour).

Also, use the default underline offset in the footer. We had links there pre-#160 too.

Sorry, something went wrong.

Uh oh!

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

m-aciek reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
hugovk added 2 commits February 2, 2024 18:56
@hugovk
Do not underline navigation links
2c20723
@hugovk
Don't underline the pilcrow (¶) navigation symbol
bd00c3d
ezio-melotti
ezio-melotti reviewed Feb 4, 2024
View reviewed changes
Comment thread python_docs_theme/static/pydoctheme.css
table.contentstable a:hover,
table.indextable a:hover {
text-decoration: underline;
text-underline-offset: auto;

@ezio-melotti ezio-melotti Feb 4, 2024

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.

auto should already be the default -- is there something else overriding this when it's not explicitly stated, or did you add it as a precaution to prevent other rules from overriding the value in case the offset is added to some parent container in the future?

Sorry, something went wrong.

Uh oh!

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

All reactions

@hugovk hugovk Feb 4, 2024

Copy link
Copy Markdown
Member Author

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.

is there something else overriding this when it's not explicitly stated ...

Yes, it's overridden by this:

a[href] {
    text-decoration: underline 1px;
    text-underline-offset: 0.25em;
}

So "normal" body text links have underlines with extra offset; but navigational links only have underlines for hover, and they're the default offset.

Sorry, something went wrong.

Uh oh!

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

ezio-melotti reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
ezio-melotti
ezio-melotti approved these changes Feb 4, 2024
View reviewed changes
@hugovk
hugovk merged commit 8eeda41 into python:main Feb 4, 2024
@hugovk
hugovk deleted the nav-no-underline branch February 4, 2024 17:17
@hugovk hugovk mentioned this pull request Aug 21, 2024
Create the Python Docs Editorial Board static site using Hugo python/editorial-board#13
Merged
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 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.

Disable underlined links

Uh oh!

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

2 participants

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