Underline Links in Text Blocks Public Beta #68734
Replies: 58 comments 130 replies
This comment was marked as off-topic.
This comment was marked as off-topic.
-
Making links more accessible is a good thing. Links are the most basic of fundamental aspects of the web. I shouldn't need to opt-in to an accessible experience. The baseline experience should be fully accessible. With that in mind, please make this the default; not a hidden setting. |
Beta Was this translation helpful? Give feedback.
-
I found that commit descriptions and titles don't have underlined links (the blue ones) yet. |
Beta Was this translation helpful? Give feedback.
-
A very welcome setting. 👍 Not having hover styles feels somewhat jarring. 🤔 |
Beta Was this translation helpful? Give feedback.
-
The GitHub blog doesn't seem to respect this setting. (It may be out of scope however.) For example, the announcement post for this feature: I'm on Firefox ESR on Linux. |
Beta Was this translation helpful? Give feedback.
-
A welcome change, though I’m really surprised this is configurable and even more so that it’s opt-in. It’d be great to be able to use "Markdown in GitHub" as the one and only published version of a project’s documentation, be it within the repository or a wiki, without having to compromise on such a basic accessibility need. Aside from this – I’m surprised this also applies to headings. Here’s an example (example source if it helps): Those headings are authored without links – the links come from GitHub’s automated creation of anchor links, so effectively all headings in GitHub would become underlined. I thought it worth flagging. Not really sure what to think of it myself. On one hand the consistency makes sense, on the other all the headings are links no matter what so not sure it’s needed. |
Beta Was this translation helpful? Give feedback.
-
This is fantastic, thank you. Please consider making "show underlines" the default. |
Beta Was this translation helpful? Give feedback.
-
Underlines can be good, but too many can create a distracting chaos that is ultimately harder to read. We are doing some work on this, here's an early draft in the discussion area: Myndex/SAPC-APCA#65 If you are going to provide underlines, it would be ideal for users to have some control over not only the underlines, but also the line spacing. If content is crowded with links, then line spacing needs to be increased to improve readability. Also, the "built in" underlines in many font families are often less than idea, often too thick and too close to the glyphs. All that said, having underlines selectively available is a good think. At the moment, due to GitHub's poor color schemes, I find I always bold and italicize at least the important links, so they are visible and readable. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
Here are some other missing underlines I've seen. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Accessibility should be adaptive and based on the client preferences. Now it ignores those who required lower contrast. To satisfy this requirement underlines should be less visible for clients with low contrast preferences and more visible to those who requires higher contrast. Example: a {
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.35);
@media (prefers-contrast: more) {
& {
text-decoration-color: rgba(0, 0, 0, 1);
}
}
@media (prefers-contrast: less) {
& {
text-decoration-color: rgba(0, 0, 0, 0.2);
}
}
} |
Beta Was this translation helpful? Give feedback.
-
Does not respect browser preferences, though. So if the user disabled link underlines in their browser for some reason (not sure in Chromium based, search "Manage Colors" in settings for Firefox based), links will still be underlined on GitHub. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
From a study:
The study:Comparing Link Marker Visualization Techniques – Changes in Reading Behavior Some studies indicate that underlines are okay for navigation sections, but bad for text blocks. I lean very much on the side of "it's the users preference", and it is a preference that is case by case, use case related, and should not in any case be forced on users as a part of posturing accessibility. |
Beta Was this translation helpful? Give feedback.
-
Achromatopsia frequency, according to various easily googleable sources, is around 1 in 30000. So this ugly 'feature' should really be disabled by default. People that need accessibility settings will look for it. Others will just assume that GitHub is getting uglier. And for all users that are not logged in, it is uglier when defaulted to underlines. Also it reduces readability as pointed out in another comment. |
Beta Was this translation helpful? Give feedback.
-
Achromatopsia
In both cases they:
Due to the co-morbid conditions, they need assistive technologies, at a minimum very dark sunglasses, text must be large, and good luminance contrast (good luminance contrast requires much green, as green is the primary component of luminance.) We have not tested with underlines, but I'd venture that if he prefered underlines it not due to color issues but due to the low vision issues. On the color issues: in Dark mode, the pure blue that GitHub is using for links is utterly inaccessible. In his case, so dark it would not matter if there were an underline because it would not be perceived just as the text would not be readable. In light mode, he'd "probably" want an underline because the blue and black would be difficult to distinguish. Just to get an idea of what an achromatope sees, here is a plot of normalized rod (and cone) responses, The dotted teal curve is the rod response (sensitivity relative to spectrum). As a result, even sRGB red is not seen at all. In the following charts, showing a dark mode and a light mode for standard vision (top) and rod only achromatopsia (bottom). So a few things to point out here;
I am going to repeat:
Over Kill BillLet's examine some thinking here and illuminate some considerations regarding links. CONSIDER:Right now for regular dark mode, there is white non-link text and dark blue link text, and with underline this means that from the normal text to the link text you have: Markings in Dark Modea) LUV saturation from near null 0.09 way up to 1.97 (chroma 8 to 108) The Objective:To differentiate the link text from the non-link text, with minimal interfereance to other tasks. This is actually a pretty low bar. Even significant impairments exhibit significant sensitivity to and ability to discriminate small variations in adjacent elements. This is different than the contrast level needed for reading, and letter and word recognition in the VWFA/lexical processing³. Looking at the above list, except ignore (i) to keep it simple.
That is four distinctly different things. Do we need all four? No, of course not. Do we need three? Also no, yet when you turn on underlines here, you are getting the first three. All three of 'em. The more things you have in a layout, the more cluttered the layout becomes. Link marking and readability need to be balanced for the given use case and intended purpose. The prominence needed for signaling any given link is an important design choice. And it is a design choice for the author to consider, as part of creating the visual hierarchy for guiding the user through the given content. Blanket "let's stick underlines because retro" is not per se accessible. SummaryThis entire thread has been very useful reading. In particular, responding to this thread has helped to exercise and focus my own thoughts on the matter. It also caused me to examine critically some of the things GitHub is doing in the name of accessibility. I have concerns, some of which I presented earlier. But it is clear that GitHub is genuinely working to improve accessibility. But how to do so in a field that is still young and emerging, with continuing research? While some lay persons might lazily point at WCAG and say "use that", WCAG does not adequately promote actual accessibility. It is a low-bar minimum, much like a safety net. Considering the work GitHub has done thus far toward building an accessible UI, I'd like to extend an offer of a zoom call with the relevant interested parties (no fee) to discuss some of the current science and developing guidance, including ways to exceed WCAG 2.x and promote visual accessibility for all. Thank you for reading, Andy Andrew Somers Footnotes |
Beta Was this translation helpful? Give feedback.
-
Not a link without styles, but I did spot some inconsistent link styles at the bottom of an issue: Here's the relevant bits of HTML: <div data-view-component="true" class="text-small color-fg-muted mt-3 mt-md-2 mb-2">
<svg aria-hidden="true" …>
Remember, contributions to this repository should follow its
<a style="text-decoration: underline" class="Link--inTextBlock" href="/urllib3/urllib3/blob/f7cd7f3f632cf5224f627536f02c2abf7e4146d1/docs/contributing.rst">contributing guidelines</a>,
<a style="text-decoration: underline" styleclass="Link--inTextBlock" href="/urllib3/urllib3/blob/f7cd7f3f632cf5224f627536f02c2abf7e4146d1/.github/SECURITY.md">security policy</a>, and
<a style="text-decoration: underline" class="Link--inTextBlock" href="/urllib3/urllib3/blob/f7cd7f3f632cf5224f627536f02c2abf7e4146d1/CODE_OF_CONDUCT.md">code of conduct</a>.
</div> Notice that links #1 and #3 have a |
Beta Was this translation helpful? Give feedback.
-
On pull request pages (right now I found it on llvm/llvm-project#71912) when having my profile set to "no underlines", some of the links are still underlined. All blue things otherwise are appropriately links. |
Beta Was this translation helpful? Give feedback.
-
Autolinked labels are underscored which is not consistent with label rendering in other parts of the page |
Beta Was this translation helpful? Give feedback.
-
تم اغلاق حسابي عن طريق الخطأ الرجاء إعادة النظر لتنشيط الحساب الموقوف وشكرا
في الأربعاء، ٦ ديسمبر ٢٠٢٣, ٢:٤٨ ص Alexander Yastrebov <
***@***.***> كتب:
… Autolinked labels
<https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/autolinked-references-and-urls#labels>
are underscored which is not consistent with label rendering in other parts
of the page
Screenshot.from.2023-12-06.00-45-52.png (view on web)
<https://github.com/community/community/assets/697976/b4bdf441-d5f7-4557-94e7-35f94f8ae949>
—
Reply to this email directly, view it on GitHub
<#68734 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/BDF46LB3QVCQZXIN3WULWV3YH6XF5AVCNFSM6AAAAAA5ME4RJOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TONZQGA3TG>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
Links on Github pages aren't underlinedHello, when I put a link in markdown for a github page, e.g. |
Beta Was this translation helpful? Give feedback.
-
Would be useful to underline (or otherwise highlight) Here is an example: You can click mesome additional verbose information For reference, here is how this is currently displayed (screenshot): There is no indication at all that you can click it; you might just assume it is regular text with some uncommon looking bullet point. |
Beta Was this translation helpful? Give feedback.
-
An underline appears on the whitespace that follows an Click to show code<a href="https://www.java.com">
<img src="https://raw.githubusercontent.com/devicons/../../../java/java-original.svg"/>
</a>
<a href="https://www.rust-lang.org">
<img src="https://raw.githubusercontent.com/devicons/../../../rust/rust-original.svg"/>
</a> A workaround can be done by removing any whitespace between the and the tags, but it hurts readability(and my soul) to format HTML this: Click to show code<a href="https://www.java.com" target="_blank" rel="noreferrer">
<img src="https://raw.githubusercontent.com/devicons/../../../java/java-original.svg"
/></a>
<a href="https://www.rust-lang.org" target="_blank" rel="noreferrer">
<img src="https://raw.githubusercontent.com/devicons/../../../rust/rust-original.svg"
/></a> It seems to be that the whitespace -- in this case the While this may be an intended feature, I find it annoying enough to write this post about it. The workaround looks even worse in my use case since I have the Click to show code<a href="https://www.java.com" target="_blank" rel="noreferrer">
<code><img
src="https://raw.githubusercontent.com/devicons/../../../java/java-original.svg"
alt="java"
height="40"
/></code
></a>
<a href="https://www.rust-lang.org" target="_blank" rel="noreferrer">
<code><img
src="https://raw.githubusercontent.com/devicons/../../../rust/rust-original.svg"
alt="rust"
height="40"
/></code
></a> Sorry for the long post, have a cookie :) Thanks to @Marcono1234 for mentioning the |
Beta Was this translation helpful? Give feedback.
-
As mentioned in this thread https://github.com/orgs/community/discussions/113792 , the contents of code blocks are being incorrectly underlined in rst files. For example, my bibtex code block has recently lost all syntax highlighting and is now underlined: https://github.com/HofstadterTools/HofstadterTools?tab=readme-ov-file#how-to-cite A fix would be much appreciated 🙏 |
Beta Was this translation helpful? Give feedback.
-
Aren't there some code blocks whole underlined? Likely to see this for syntax highlighted blocks in .rst files. |
Beta Was this translation helpful? Give feedback.
-
This is indeed a great move towards improving accessibility on the platform. Making links easily distinguishable not only by color but also by styling can greatly enhance the user experience, especially for visually impaired users. The decision to underline links within text blocks by default is particularly commendable as this would significantly boost readability and navigation. The introduction of a toggle feature to 'show' or 'hide' underlines provides users with greater control over their visual experience on the platform. This allows for a more personalized, user-friendly interface that caters to individual preferences. On the off chance that users encounter links which aren't underlined despite the setting being enabled, it's a good call to action to urge them to report it. This can help the team in promptly addressing such oversights, further enhancing the platform's accessibility. It's clear that these steps exhibit GitHub's commitment towards fostering inclusivity and it's heartening to see the efforts being put in to ensure that the platform is accessible to all users. |
Beta Was this translation helpful? Give feedback.
-
🕒 Discussion Activity Reminder 🕒 This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions: 1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as 2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own. 3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution. Note: This dormant notification will only apply to Discussions with the Thank you for helping bring this Discussion to a resolution! 💬 |
Beta Was this translation helpful? Give feedback.
-
Links should be easily distinguishable from surrounding text, not solely by color but also by styling. Thus, we've introduced a new accessibility setting to underline links within text blocks. You can now toggle this setting to either "show" or "hide" underlines for such links, ensuring clear visibility and differentiation. Per default, the setting is set to
underline
!If you come across any links within text blocks that aren't underlined even when the setting is enabled, please let us know here.
Beta Was this translation helpful? Give feedback.
All reactions