Non underlined / outlined links are giving problems

Community
1

Hi,
Sometimes I’m confronted with the issue that the links in the posts of this forum aren’t underlined. The links can be hardly visible or just not visible [because of their minimal color difference in respect to the normal text *)], especially:

  • in case the visitor has a strong incoming light on his/her monitor,
  • in case the visitor has diminished the contrast and/or brightness in the monitor settings (to save headache in pure black/white web pages),
  • in case the visitor has a laptop which doesn’t have the right screen inclination,
  • in case the visitor has not the optimal contrast perception; about 40% of the visitors haven’t! **)
  • in case the visitor is color blind (mostly red/green).
  • in case of combination of these factors.

[CENTER]
Used: [U]colorfilter.wickline.org[/U][/CENTER]

So I guess I’m not the only one who is missing links in the forum (sometimes I see that people are asking for a link which is already posted earlier).
But we don’t know how much links are missed. Who is missing a link, doesn’t ask for it (only when the link is mentioned elsewhere in the text)! :rolleyes:

Conclusion: the not underlined links reduce heavenly the user friendliness and accessibility of the forum.

  • For a part of the visitors the accessibility is almost 0; they have to mouse over all text to see if the hand pointer is popping up.
  • Using the Tab key to jump from link to link is also made impossible (the outline dots are styled away @focus, so you don’t know where you are).
  • Means also: visitors without the possibility to use the mouse cannot profit of the forum.

All this is diametrically opposed to the essential WCAG standards ([U]Web Content Accessibility Guidelines[/U]):

Maybe it is not too easy to realize this in the used forum technology, but I hope you can pay attention to these accessibility issues. :slight_smile:

BTW: the underlining of all the links in this post I did by hand! :wink:
Francky

*) Tested with the [U]Contrast Analyser[/U]:

  • The contrast ratio text/background as such is o.k. (10,3:1).
  • The contrast ratio link/background as such is just sufficient (4.8:1).
  • But the color difference text/link is 208 (the threshold is 500).
  • And the brightness difference text/link is 32 (the threshold is 125).

**) Depending of the demographics of the country.
“The amount of light that the eye of a 60-year-old can see is only 1/3 of the amount of a 20-year-old.” ([U]Source[/U], in Google-translate English).
This means: for people between 20 and 60 years the contrast power is somewhere between 100% and 33%. Quite a difference! Above 60 that is going on (70 years old: about 12.5%…).

2

I’m not seeing where this is an issue. Links in posts are underlined and have enough contrast against the background to be clearly visible.

Are you commenting about forums in general?

Is this supposed to be a blog post?

3

Hm, not for me. Anyhow, the rationale for this topic is mentioned by Francky here: http://www.sitepoint.com/forums/showthread.php?1173382-How-to-create-circle-image&p=5579520&viewfull=1#post5579520

4

Are you sure that’s not Greasemonkey?

5

I’m hearing you @Francky; - I’ll talk to the guys and get that sorted when they have a gap.

6

I believe that those with an elevated status see the forum a bit differently than the average member:

7

@ronpat Yikes, that hover state is not good! :-/

8

Ah, I see the things are rolling in a good direction while I was writing my answers to Force Flow (I had to gather some links). :slight_smile:
Here the answers.

Links in posts are underlined and have enough contrast against the background to be clearly visible.

I don’t think so:
The links are not underlined by default in this forum, and don’t have the dotted outline if the link has focus: not in FF, not in Chrome etc.

On a link in a post, Firebug gives back that in stylesheet [U]www.sitepoint.com/forums/css.php?styleid=40&langid=1&d=1379302775&td=ltr&sheet=bbcode.css,editor.css,popupmenu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css,[/U] is stated (from line 1289):

a:active, a:focus {
	outline: 0;
}
body a {
	color:#0d66ac;
	text-decoration:none;
}
body a:hover,
body a:hover .time,
body a:hover .shade,
body a:hover .understate {
	color:#474747;
	text-decoration:none;
}

That is: the visitor does not see the underline or the outline.
Unless the visitor has client side made a browser setting which is overruling this.

  • In FF that is possible in the options menu under the tab “Content”, and then the button “Advanced…” in the section “Font types and colors”. In the popup you can choose your own colors for links, underlining, etc.
  • Now there is a checkbox “Allow pages to use their own colors, instead of my selection above”.
  • But in my fresh installed FF24 this checkbox is checked by default : web pages are allowed to use the stylesheet colors and the {underline:none;}.
  • I didn’t find in the FF-options a way to force the focus-outline; I guess you have to dive into the FF user stylesheet.
  • IE has in the Extra > Internet-options menu also the possibility for own colors and an Accessibility button. Also here a checkbox: “Ignore specific colors of webpages”. And this checbox is unchecked by default: again allowed.

Maybe you have set your browser in the right option to see the underlines, but that is not standard.
And what happens if you throw away your mouse, and visit the SP forum only by keyboard?
My point is: a website should not be dependent on special client side settings of his/her browser. I guess more as 50% of the surfers don’t even know that these options exist.

I know, the SP forum is not a governmental website, but to follow the guidelines is a matter of good practice (and should be a stimulation for the webbuilding visitors of SP!)

Are you commenting about forums in general?

No, see above; though I see other forums have the same imperfections.

Is this supposed to be a blog post?

No, it was specially written for the webmaster team of Sitepoint: in the Feedback section of the forum. :wink:

@Galactic Overlord & other contributors: thanks a lot to clear the things! :slight_smile:

Still underlining by hand, :smiley:
Francky

Note: in some browsers the visibility of the color of the links is somewhat better because of a better rendering of the fonts.

9

This is what I see in Firefox:

I see the same thing if I’m not logged in.

Though it does look like the mod add-on and one of the scripts does contribute to the appearance.

10

Hi Force Flow,
Yes, indeed underlines to see. But this is a bit confusing: my posts just are all exceptions! :magic:
This is what I called “underlined by hand”; in the section you screenshotted, I made the underlines in the bb-code: [ U ] link [ /U ]. :stir:

Like you did in your signature:

In both cases the underlines are hard coded in the html (not in the css of the links):

  • In your case the <u></u>'s are outside the <a></a> links, so the underline is in the normal text color #4A4A4A (dark grey).
  • I placed the <u>'s inside the <a>'s: underlines are in the blue link color.

But if I take a look in the signature of ronpat, ralph.m or HAWK, I see this: (the default setting of the links: not underlined)

  • Note: here the colors and bold styles are hard coded in the html, again with the bb-code.

This normal style of the links happens in the same way in the body of the messages (see ronpat’s screenshot in #6).

11