SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)

    Question Non underlined / outlined links are giving problems

    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.



    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)!

    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 (Web Content Accessibility Guidelines):

    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.

    BTW: the underlining of all the links in this post I did by hand!
    Francky
    _______
    *) Tested with the Contrast Analyser:
    • 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." (Source, 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. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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?
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Force Flow View Post
    Links in posts are underlined
    Hm, not for me. Anyhow, the rationale for this topic is mentioned by Francky here: http://www.sitepoint.com/forums/show...=1#post5579520
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,499
    Mentioned
    944 Post(s)
    Tagged
    14 Thread(s)
    Quote Originally Posted by Force Flow View Post
    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 sure that's not Greasemonkey?

  5. #5
    Galactic Overlord gold trophysilver trophybronze trophy
    HAWK's Avatar
    Join Date
    Aug 2003
    Location
    New Zealand
    Posts
    12,499
    Mentioned
    944 Post(s)
    Tagged
    14 Thread(s)
    I'm hearing you @Francky ; - I'll talk to the guys and get that sorted when they have a gap.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Force Flow View Post
    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.
    I believe that those with an elevated status see the forum a bit differently than the average member:

    SubtleLinks.png

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    @ronpat Yikes, that hover state is not good!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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).
    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 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, is stated (from line 1289):
    Code:
    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.

    • In the Netherlands, for governmental websites the WCAG guidelines are obligatory: the website has to be accessible without special measures of the visitor (inclusive link-underlining and focus-outlines). See The Web Guidelines are required for? (Google-translation).
    • The same for all the official websites of the EU institutions (source)
    • In the States there are the Section 508 rules: almost the same as the WCG guidelines (see here).
    • In the UK there is the Equality Act, and so on.

    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.
    =======

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

    Still underlining by hand,
    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. #9
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    This is what I see in Firefox:
    links.jpg

    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.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi Force Flow,
    Yes, indeed underlines to see. But this is a bit confusing: my posts just are all exceptions!
    This is what I called "underlined by hand"; in the section you screenshotted, I made the underlines in the bb-code: [ U ] link [ /U ].

    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).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •