New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added underlines to links in toots #9898

Open
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
@aardrian
Copy link

aardrian commented Jan 22, 2019

Link text color is #f1ebff, surrounding text is #ffffff. They have a contrast ratio of 1.2:1. Not only is hard to see links that are so close in color to the text, they also require a pointing device (mouse) to quickly scan for links. Instead of having to meet a 4.5:1 contrast ratio, adding the underline will allow this to pass a WCAG check.

Added underlines to links in toots
Link text color is #f1ebff, surrounding text is #ffffff. They have a contrast ratio of 1.2:1. Not only is hard to see links that are so close in color to the text, they also require a pointing device (mouse) to quickly scan for links. Instead of having to meet a 4.5:1 contrast ratio, adding the underline will allow this to pass a WCAG check.
@rugk

This comment has been minimized.

Copy link

rugk commented Jan 22, 2019

IMHO, I'd rather choose a better color than adding underlines, as these do aesthetically not look that nice. And the theme could work better with a little more contrast.

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jan 22, 2019

Links in toots practically always look like example.com/foo, not like other text, so the homogenity of color and style with other text is a feature, not a bug.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 22, 2019

This reference (which is a collection of references) may be useful: On Link Underlines

@rugk

I'd rather choose a better color

That is an option, but you will want to target a 4.5:1 contrast ratio with the background and a 3:1 contrast ratio with the surrounding text.

these do aesthetically not look that nice

That is a matter of opinion. I think they look fine with underlines. More importantly, I can use it with underlines. I think usability trumps aesthetics.

@Gargron

so the homogenity of color and style with other text is a feature, not a bug.

I am not sure I understand. Are you saying that the link text matching the surrounding text is a feature?

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jan 22, 2019

Yes. Readers do not have to guess whether a piece of text is a link by color or underline, because it never looks like other text, it looks like a URL. The slight color difference is a minor help in skimming, but it is not fundamental in my opinion. Keeping visual clutter down is important.

@rugk

This comment has been minimized.

Copy link

rugk commented Jan 22, 2019

This reference (which is a collection of references) may be useful: On Link Underlines

Thanks, that is actually interesting, because it states that (G182) this is actually a visual clue to make links identifiable even without color vision. Thus, it addresses a slightly different case than the contrast. It also explains, you can use other clues, like a different font size or so.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 22, 2019

@Gargron

Yes. Readers do not have to guess whether a piece of text is a link by color or underline, because it never looks like other text, it looks like a URL.

The is demonstrably not true. I tooted a11y.reviews yesterday. No sub-page, and it does not use a common TLD.

The slight color difference is a minor help in skimming, but it is not fundamental in my opinion. Keeping visual clutter down is important.

The slight color difference is so slight as to be imperceptible except under ideal conditions (no glare on screen, good screen, good vision, etc.).

What you perceive as visual clutter is making it harder for some users (or all users in some conditions) to easily visually identify links.

Now that you know the interface is harder for some users (which is also backed up by contrast ratios and best practices as outlined by WCAG), are you comfortable telling those users that your preference for "less clutter" overrides their ability to use it?

@rugk

Thus, it addresses a slightly different case than the contrast.

It does. Which is why I added underlines. Instead of solving for contrast, underlines address it better for all sighted users.

It also explains, you can use other clues, like a different font size or so.

Yup, but after years of testing this, underlines work best as they result in the least page reflow and weird spacing.

@handcoding

This comment has been minimized.

Copy link

handcoding commented Jan 22, 2019

I like @aardrian’s approach and I think it could work, but just to toss out another option if it may be of interest, the WCAG guidelines also allow for color alone to be used for links if the links have a contrast ratio of at least 3:1 against their surrounding text and a contrast ratio of at least 4.5:1 against the background color.

And as that goes, one potential color combination that may be an option is #a47aff, which has a contrast ratio of 3:1 against the surrounding white text and 4.5:1 against the background. For convenience, I’ve also thrown together a quick CodePen snippet where you can see how that looks.

Lorem ipsum placeholder text that’s set to #ffffff against #282c37 with #a47aff links

@scottaohara

This comment has been minimized.

Copy link

scottaohara commented Jan 22, 2019

Regarding all the above, I'd definitely prefer underlines on links. it's by far the easiest way to differentiate them from other text.

@mayaeh

This comment has been minimized.

Copy link
Collaborator

mayaeh commented Jan 23, 2019

Even now, when you hover the mouse over the link, the underline will be displayed.
Why is not it enough?
2019-01-23 10 04 17

@scottaohara

This comment has been minimized.

Copy link

scottaohara commented Jan 23, 2019

@mayaeh because not everyone uses a mouse (there are no :focus styles for keyboard users btw). not everyone has perfect vision and color alone isn't always sufficient to indicate a difference in static vs interactive text.

@aardrian already provided some additional reading material on this. I suggest you read that too.

This reference (which is a collection of references) may be useful: On Link Underlines

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 23, 2019

@scottaohara i don't have any dog in this fight, since I use a custom theme with a much more noticeable link contrast (and there is a high-contrast theme included by default in mastodon for those that would like to use it), but it's absolutely false to say that there are no focus styles for keyboard users when it comes to links:

image

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

@mayaeh

Even now, when you hover the mouse over the link, the underline will be displayed.
Why is not it enough?

Per my statements above:

  • not everyone is a mouse user (touch screen users, keyboard users, power users, people who lost their mouse to their cat)
  • per WCAG, another affordance is needed.

And @scottaohara beat me to it.

I am going to attach this image, however, showing how non-standard TLDs, slash-separated lists of items, and non-linked URLs are confusing and require me to go tapping or mousing or tabbing to see what is what.

Oh, I also kinda came to Mastodon because Twitter has been so historically crap at supporting accessibility in any meaningful way. I would like to see it do better, and since I can contribute I am doing just that. Trying to make it better.

screenshot_20190122-203031

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

@nightpool

but it's absolutely false to say that there are no focus styles for keyboard users when it comes to links:

There is no :focus style. You can see it in the inspector or the CSS files. What you are seeing is the browser's default focus ring. So Scott is demonstrably correct, but you have keyed into a common misunderstanding about browser defaults versus, well, doing better than browser defaults.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 23, 2019

@aardrian I'm not sure where you took that screenshot, but it seems to be using a custom theme. Links look like this on mastodon:

image

This isn't great, and I agree it should probably be changed, but it's much better then the artificially darkened screenshot you posted.

What you are seeing is the browser's default focus ring

I know exactly what I'm seeing. Whether the style is applied by the user-agent or by the application, there is still a style that's applied on :focus. In fact, nearly every accessibility guideline you will ever read will tell you not to override the brower's default :focus styles, since the primary goal is to be consistent across different applications. Framing it as not doing "better" then the browser defaults is very dangerous and misleading

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jan 23, 2019

There is a high-contrast theme in Mastodon.

@mayaeh

This comment has been minimized.

Copy link
Collaborator

mayaeh commented Jan 23, 2019

@scottaohara @aardrian I was forgotten about touch screen.
umm... I am thinking about the importance of making the link easier to distinguish.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

@nightpool

The screen shot is off my mobile, where I mostly read Mastodon. I am using the Toot Cafe site theme. I have also browsed other Mastodon instances with different themes. It's part of why I suggested an underline instead of trying to find every color combination for every theme that meets WCAG minimums.

In fact, nearly every accessibility guideline you will ever read will tell you not to override the browser's default :focus styles, since the primary goal is to be consistent across different applications. Framing it as not doing "better" then the browser defaults is very dangerous and misleading

I would like to see these guidelines you reference. Most of the accessibility practitioners I know (including me) recommend against leaving the defaults as they can be difficult to see on some backgrounds.

Further reading: Avoid Default Browser Focus Styles

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

@Gargron

There is a high-contrast theme in Mastodon.

It is not sufficient because it also suffers from the same contrast issues and lack of underline. I attached a screen shot from my mobile using the high contrast theme.

screenshot_20190122-204937

@scottaohara

This comment has been minimized.

Copy link

scottaohara commented Jan 23, 2019

@nightpool I'll be more clear, there are no defined :focus styles.

What you showed was a screen shot from what I assume is Chrome.

Here is a screen shot showing a focus outline from Firefox on macOS. Which is what happens when you don't define custom focus styles on heavily styled (dark theme) web documents/applications

screen shot from firefox on macOS

In fact, nearly every accessibility guideline you will ever read will tell you not to override the browser's default :focus styles, since the primary goal is to be consistent across different applications. Framing it as not doing "better" then the browser defaults is very dangerous and misleading

I would like to see these guidelines you reference. Most of the accessibility practitioners I know (including me) recommend against leaving the defaults as they can be difficult to see on some backgrounds.

I would also be interested to see the documentation you're referring to that says to not change default focus styles. Also being an accessibility practitioner, I'd be interested in knowing of these documents and then reaching out to these people to ask them to stop providing misleading information...

per G165:

Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 23, 2019

WCAG G165 specifically addresses using the default focus indicator:

G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over

They address the concerns you have about visibility but say that it's sufficient for users to be able to customize the default focus indicator using assistive technology. But, again, discussions of the focus indicator are off topic.

It does look like there's a bug in the high contrast theme here. We should fix the high-contrast theme.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

@nightpool

G165 specifically addresses using the default focus indicator, and is a sufficient technique for WCAG-AA:

You are correct. I forget about that because, frankly, nobody who actually does this stuff pays attention to that one. In fact, many actively counsel against it (see my link above). There are a few Sufficient Techniques that (since WCAG 2.0 was published) we have found to not be truly sufficient after a decade of testing. It's one of the reasons automated accessibility checkers are meh and trying to only meet WCAG at the minimum is frustrating to watch.

That being said, it doesn't address the issue I raised as that only satisfies for when a control has focus, not conveying its affordance (clickability in this case) before that interaction.

It does look like there's a bug in the high contrast theme here. We should fix the high-contrast theme.

Agreed.

In the meantime, can we approve the link underline here? I haven't heard any arguments against that go beyond aesthetics.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 23, 2019

I would prefer to solve this with high-contrast links rather then an underline. Specifically I would prefer to solve this with high-contrast links in both the main style and the high-contrast styles—preferably with a 3:1 contrast for the main style and a higher contrast for the high-contrast styles.

If we do choose to go the underline route we should specifically exclude hashtags and mentions, since those are already delineated by a sigil and should not be set off from running text in the same way that links generally can be.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 23, 2019

Hmm. After playing around with some styles, it does seem hard to achieve a 3:1 luminance contrast with the body while also maintaining an appropriate contrast against the dark background...

@kleinfreund

This comment has been minimized.

Copy link

kleinfreund commented Jan 23, 2019

Which is part of the reason for why a lot of people (accessibility practitioners in particular) simply opt for underlined links.

@rugk

This comment has been minimized.

Copy link

rugk commented Jan 23, 2019

So can't you just include this change (underline) in the hard-contrast theme?

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jan 23, 2019

So can't you just include this change (underline) in the hard-contrast theme?

That was my point as well, I think that is the best solution.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 23, 2019

So can't you just include this change (underline) in the hard-contrast theme?

That was my point as well, I think that is the best solution.

I am all for seeing the high contrast theme actually be high contrast.

But the issue I have raised is for links in the main theme / all themes. They all either need an underline (easiest) or better contrast (trickier because each theme uses different colors).

Telling users who cannot see links to switch to the high-contrast theme still does not address all use cases. It assumes that when in the sun or using the phone dimmed at night that users know there is a high-contrast theme and can easily get into the preferences to change it.

Again, are they are any arguments against this other than aesthetic preferences of the project maintainers?

I think I have identified plenty of cases for adding underlines. They are grounded in WCAG, US case law, international law, best practices, years of user research, and usability.

@kleinfreund

This comment has been minimized.

Copy link

kleinfreund commented Jan 23, 2019

As a user, I should not need to understand URI syntax in order to discover links. I should be able to rely on visual or acoustic cues ensuring the discoverability of interactive elements. One of the seven fundamental principles of design as stated in “The Design of Everyday Things” by Don Norman says:

“Discoverability. It is possible to determine what actions are possible and the current state of the device.” (Source: Donald A. Norman, 2013. The Design of Everyday Things. Page 72. Basic Books)

Several reasons for why the discoverability of links in the default theme cannot be ensured have been named. In my opinion, there haven’t been arguments against underlined links which would outweigh these reasons in importance. Maintaining a clean aesthetic is not more important than ensuring the operability of a web page. An interactive element that one cannot perceive is not operable.

@mayaeh

This comment has been minimized.

Copy link
Collaborator

mayaeh commented Jan 24, 2019

Underline seems to apply also to the hashtag and the name of the reply destination.
Umm... I can not judge whether this is correct.

_2019-01-24_11_55_30_re
Larger size is here

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 26, 2019

I think the problem is that I never told you that underlines are objectively quite attractive.

I like the crunch in my molars when I click on them. The smell of ozone, the taste of pennies. They bring me the joy of Christmas morning, the calm of falling asleep in a library.

The confidence of the line, shape of the graceful rectangle, together have the beauty of a Stradivarius and the soul of wit (unlike brevity).

They are as close to perfection as the face of the owner of His Noodly Appendage.

So I think that settles the aesthetics issue you raised.

With all the evidence I cited above and my sincere belief underlines are pure poetry of form, let’s do this, @Gargron ! Approve this PR and let’s make something beautiful together!

@hughrun

This comment has been minimized.

Copy link

hughrun commented Jan 26, 2019

"Links should look like links" is a basic tenet of web design, whether "accessible" or not. This is about the design of the standard out-of-the-box Mastodon. If @Gargron or anyone else prefers to retain less accessible URLs on their own instance for personal aesthetic reasons, then they have the custom CSS section available to remove the underline.

@trwnh

This comment has been minimized.

Copy link
Contributor

trwnh commented Jan 26, 2019

One point I'd like to note -- not necessarily for or against, but also not based purely in aesthetic -- is that from my experience, I expect underlines to be applied to links on hover rather than by default. I'm not entirely sure why I have this assumption*, and I can't really break down the percentage of websites that do this, but this is my gut assumption and what I instinctively expect after 20-odd years of browsing the web. I can't say for sure, but I'd warrant that most people can agree that the following are prevailing design patterns:

  • Links are generally blue.
  • Visited links are generally purple.
  • Underlines are applied sometimes by default, sometimes on hover.

These three things are roughly constant across most websites and therefore reasonable expectations in the absence of significant theme overrides.

With respect to creating contrast in an absolute sense, though, one should stick to only one paradigm -- color or shape. I personally think links should take the accent color and have an underline applied on hover or focus, and that's how I personally do it in my Masto Flat CSS theme. But this could easily be reversed so that links are underlined and take a color on hover instead. Regardless of which ends up being chosen, the current contrast is way too low, even for the non-high-contrast theme.

EDIT: *Found out via @dariusk (#9928 (comment)) that my assumption is most likely due to WCAG 2.0's guidelines for 3:1 color contrast combined with underline on hover. I guess that explains its prevalence as a design pattern!

@yatil

This comment has been minimized.

Copy link

yatil commented Jan 26, 2019

@trwnh You assume that everyone can perceive color. The default in browsers is that links are always underlined. That there is an anti-pattern that was established when people didn’t care about accessibility/usability much, informed by the designers who only knew print, is not an argument to continue this user-hostile design trend.


People who cannot perceive color, who don’t use the mouse pointer, who use the mouse but have a hard time pointing it precisely, elderly people, people who use the site in the sun and everyone else profits from underlines.

I’m flabbergasted that open source communication projects don’t want to reach the widest audience possible. Just add underlines. It really isn’t a big deal.

@trwnh

This comment has been minimized.

Copy link
Contributor

trwnh commented Jan 26, 2019

@yatil I don't disagree, nor do I assume everyone can perceive color. I was voicing support for this PR, but prefacing with a neutral reference to precedence. Perhaps I was not clear enough.

@bobstechsite

This comment has been minimized.

Copy link

bobstechsite commented Jan 26, 2019

If it's of interest to anyone, I've raised a feature request about making it easier for individual users and instance admins to apply their own custom CSS themes and share them with others.

I think the discussion about default themes is an important one to have (as I stated above, I'm in support of adding underlines on the grounds WCAG 2.0 suggests colour alone isn't sufficient), but giving people more of an ability to override the default behaviour in future releases may be one way of resolving this discussion.

#9919

@scottaohara

This comment has been minimized.

Copy link

scottaohara commented Jan 26, 2019

@trwnh, i realize you said you were trying to be neutral in your prior post, but some edits to your bullets about links which would make the points indisputable:

  • Links are blue (by default).
  • Visited links are purple (by default).
  • Underlines (are applied by default, and CSS can be written to remove them. Without extra care/design considerations, removing underlines can have a negative impact on allowing people to be able to quickly identify links, based on cited visual and/or situational impairments).

It honestly matters little of what other websites do with their links. There are tons of inaccessible and/or poor UX ant-patterns that other websites employ. Poor design patterns does not excuse poor design patterns.

Adding underlines to links, by default, would help provide a more inclusive experience to Mastodon users. @bobstechsite's feature request is a good idea, but is a much bigger ask than a single line edit to the default CSS theme. But please, do not interpret that feature request as thinking its OK to put the onus on the user to make their theme more accessible (not saying that's what you're suggesting bob. but it's often path people take to disavow themselves of responsibility).

All this circular discussion boils down to this though:

You can either accept this PR to make links more inclusive to Mastodon users (and then take up additional work for an alternate accessible solution, if you so choose).

Or you can continue to value opinionated aesthetics over cited usability concerns.

@dustinwilson

This comment has been minimized.

Copy link

dustinwilson commented Jan 26, 2019

I am quite surprised to see a thread as long as this one over accessibility of hyperlinks especially considering Mastodon has for quite some time now included accessibility features but refuses to right now do the most basic of changes that would benefit the accessibility of a large amount of people.

I have 10 years of experience in the Web browser realm, working as a user experience designer first on contract for Opera Software and then later full time. The W3C created guidelines for all of this stuff starting years ago, a good bit of it worked out by many of my colleagues at Opera. Thanks to the miracle of eyeglasses and contacts I have perfect 20/20 vision, and I sometimes have difficulty discerning the difference between plain text and hyperlinks on Mastodon. This is because the contrast ratio between the white text of a toot and its hyperlinks is an abysmal 1.32:1, and factors such as varied lighting in my own environment and glare on my screens can contribute to impaired vision. The W3C recommends at least a 3:1 ratio between hyperlinks without an underline and the text around them, and that is for normal vision. At the very least please change the color to something even people with normal vision can see. This applies to colors of icons as well.

High contrast themes are a great thing, but when users must navigate an inaccessible-for-them user interface looking for a UI widget that they might not even know exists to make the page display in a higher contrast it in of itself is not accessible. A Web application intended to be used by the mass public should at least conform to WCAG AA and its high contrast theme conform to WCAG AAA or more. This allows for people who aren't blind enough to need screen readers to navigate your Web application and even find where to turn on the high contrast theme if needed.

There have been extensive usability testing done over nearly three decades concerning hyperlinks, and it has been determined time and time again that underlined links are much faster for users to identify and use. Users are so accustomed to scanning for underlines that any use of underlines except for hyperlinks on the Web is strongly discouraged. Usability tests have also shown that text that is colored significantly differently from text around it are also identified by most users as hyperlinks, but the time to identification is significantly higher than with underlined hyperlinks (again providing there's at least a 3:1 contrast ratio between the link and surrounding text). Citing other websites' non-usage of underlined hyperlinks (especially this one which is a usability nightmare concerning hyperlinks) isn't a valid argument considering the other side has scientific proof through decades of usability testing to back itself up. It's not realistic in a web application to make all links underlined because of hierarchy of information and links-that-really-are-buttons, but there isn't any problem with making hyperlinks within toots be underlined. At the very least consider making hyperlinks in toots underlined in the high contrast theme.

tl;dr Please increase the contrast ratio on hyperlinks to a 3:1 ratio against the text that surrounds it and add underlines at least to hyperlinks within toots to the high contrast theme.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 27, 2019

@Gargron , have you ghosted? You have not offered any new information on this PR in 4 days but your GitHub contributions chart shows you have been active each day since (including today).

I made a screen shot showing how the underlines look in the toot.cafe theme. Note that now links are visible in the notifications panel (where the contrast is reduced even more). Note how they ease scanning. Note how beautiful the underlines are.

The PR in the SCSS file compiles to this simple declaration:

.status__content a, .reply-indicator__content a { text-decoration: underline; }

It is so simple, it even fits in a bookmarklet:

javascript:(function(){var a=document.createElement('style'),b;document.head.appendChild(a);b=a.sheet;b.insertRule('.status__content a, .reply-indicator__content a{text-decoration:underline}',0);})()

So, again, please approve this PR. Let's provide a better experience for all of Mastodon's users.

2019-01-27 8

@hyperpress

This comment has been minimized.

Copy link

hyperpress commented Jan 27, 2019

As @aardrian, and others have demonstrated, far more than should've been necessary, the underline is the far less complex and more accessible of the proposed solutions. It should not take 50 or 60 comments to arrive at the best usability solution across the board. You'll be fixing a problem and addressing a user segment ignored by Twitter. Come on, man. Let's do it right.

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 28, 2019

For those following along at home, @Gargron appears to have decided to tackle just color contrast over at #9928 .

It is not clear if @Gargron has chosen to abandon this issue as he has chosen to not respond here.

@Amolith

This comment has been minimized.

Copy link

Amolith commented Jan 28, 2019

I'm going to change the opinions I've mentioned above and say I'd prefer underlining links rather than increasing contrast. I was thinking that this PR would look like the screenshot shown in a comment above, with links under every, well, link. However, as @aardrian shows here, the change only applies to . . . "normal" links and I think that does look quite nice. While it admittedly disrupts the "flow" a little, I think it makes the UI look a bit cleaner and I honestly prefer it to coloured URLs.

@nickcolley

This comment has been minimized.

Copy link

nickcolley commented Jan 28, 2019

I was wondering if the underlines looked aesthetically bad but given @aardrian 's screenshot it looks really tidy and clear.

Mastodon has the opportunity to lead and be the most inclusive platform available.

This is something we can be proud of that commercial platforms have little incentive to do.

@dariusk

This comment has been minimized.

Copy link

dariusk commented Jan 28, 2019

@Amolith Both of the screenshots you link seem to be showing the same implementation. The only difference is that @aardrian's screenshot shows lots of posts that don't have hashtags and @-mentions in them.

  1. https://user-images.githubusercontent.com/766076/51653631-933a1e00-1fd7-11e9-8965-bd5cb5a4745f.png
  2. https://user-images.githubusercontent.com/1376607/51803727-4730e880-2226-11e9-931c-a59950d55e7a.png

You can see in image 1 that there are underlines under hashtags, @-mentions, and regular links. There are not underlines under the headers show user info in each toot.

In image 2, there are underlines under hashtags (you can see it in #a11y at the top of the notifications column), there are no @-mentions present, and regular links are underlined.

In short, they seem to be the same (there are no @-mentions present in the 2nd image which makes it seem cleaner). @aardrian's screenshot isn't terribly representative of my usual timelines, which have a lot of @-mentions and not a lot of hashtags.

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 28, 2019

@Amolith

This comment has been minimized.

Copy link

Amolith commented Jan 28, 2019

@dariusk you're right 🤦‍♂️ 😅

@dolljoints

This comment has been minimized.

Copy link

dolljoints commented Jan 28, 2019

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Jan 28, 2019

Screen shots with default Masto theme with toots pulled from the federated and local timeline (I could not find ones with lots of hashtags or handles).

But again, the aesthetics are arbitrary. The base should be underlined, with specific instances having the ability to remove underlines or otherwise hobble their UI.

2019-01-28- 2

@benlk

This comment has been minimized.

Copy link

benlk commented Jan 28, 2019

Another screenshot showing the default theme, with underlines via the change that this PR would make.

The difference between this screenshot and @aardrian's screenshot is that my browser, the current Chrome, has text-decoration-skip-ink: auto; set in the user-agent stylesheet. This means that where various glyphs' descenders cross the underline, there's a gap in the underline to accommodate the descender.

You'll also notice that underlines in this screenshot are thicker than in the other screenshot; that's probably because I'm either browsing at 90% zoom or because of browser-dependent rendering of underlines.

screen shot 2019-01-28 at 9 50 10 am

Here's a screenshot allegedly using the "High Contrast" theme, also with underlines not disabled:

screen shot 2019-01-28 at 9 58 40 am

@clarcharr

This comment has been minimized.

Copy link
Contributor

clarcharr commented Jan 28, 2019

Very much appreciate this combined with the contrast increase in the other PR. Increasing colour contrast does not negate the need for underlines; both are very appreciated.

@Deraw-

Deraw- approved these changes Jan 30, 2019

@tootsuite tootsuite deleted a comment from ashleyhull-versent Jan 30, 2019

@nightpool

This comment has been minimized.

Copy link
Collaborator

nightpool commented Jan 30, 2019

(I've deleted a comment from this thread for being overly hostile and dismissive. Everyone on both sides is reminded to be civil, respectful, and assume good faith when discussing this issue)

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Feb 5, 2019

Does anyone here have the authority to add the Accessibility label to this PR?

@aardrian

This comment has been minimized.

Copy link
Author

aardrian commented Feb 5, 2019

Thanks, @sorin-davidoi !

nikolas added a commit to nikolas/github-drama that referenced this pull request Feb 12, 2019

Merge pull request #92 from TheLastZombie/master
Add the Mastodon link underline thing - tootsuite/mastodon#9898
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment