Re: Differentiating links from normal text

Hi Poornima,

There are so so many options for styling links beyond a standard underline.
Below are a few ideas to get you started:

a bottom border has far more styling options than an underline, and it
offers up a world of interactive possibilities. Check out these examples
and tutorials <https://speckyboy.com/underline-text-effects-css/>, the gold
border used for article titles on the Taste website
<https://www.tastecooking.com/>, and this variation of the "better underline
<https://codepen.io/lhorak/pen/bEavyg>" or "smarter underline
<https://eager.io/blog/smarter-link-underlines/>" approach (ie, an
underline that does not overlap with descenders) on the Women & Tech website
<http://womenandtech.com/>.

a heavier font weight than the surrounding text can help links stand out.
Here is an example from Subtraction <https://www.subtraction.com/>. Note
that they've combined a bold font weight with a thin bottom border.

a background color can make links appear highlighted. See the "Support Our
Journalism" link on The Intercept website <https://theintercept.com/> and
the highlighted link example on this page of inline anchor tutorials
<https://codepen.io/nickmortensen/pen/ryJLD>.

an icon, such as an arrow, may be associated with a link (echoing Richard's
recommendation above.)

All of this being said, the convention with article titles is that they are
often assumed to be links without any special styling, such as on the NY
Times website <https://www.nytimes.com/>. I'm guessing that the only text
that needs special treatment is the CTA, so perhaps focusing on that alone
will resolve the problem.

++

Michellanne Li
Web Designer

Palantir.net <http://palantir.net/>
773.645.4100

Sign up for occasional emails:  http://www.palantir.net/newsletter
Follow us on Twitter <https://twitter.com/palantir>

On Sun, Jan 28, 2018 at 9:33 PM, Andrew Cunningham <
andj.cunningham@gmail.com> wrote:

> Although for some languages and scripts underlining text has semantic
> meaning and may represent something other than a link. So underlining by
> itself is likewise a less than desireable way of indicating the presence of
> a link.
>
> Likewise underlining can obscure diacritics below a base character
> impacting on legibility of text. So skipping ink or positioning underline
> sufficiently below text may be concerns although this In turn may require
> adjustments to leading .
>
> Andrew
>
>
> On Sunday, 28 January 2018, Userite <richard@userite.com> wrote:
>
>> Hi Poornima,
>> There definitely needs to be some TEXTUAL differentiation if the link
>> text is within a text part of the page, you must not rely simply on a
>> change of colour.  – However if the link is part on a clearly defined
>> navigation menu it does not need textual identification because the context
>> already makes it clear that it is a link.
>>
>> So for your problem you need to decide if the list of links is obvious
>> from its context.  If your page says something like “Here is a list of
>> links to useful info” and is immediately followed by a numbered or bulleted
>> list then you could probably get away without the need to underline the
>> text in each list item.  Your designer is probably correct in saying that a
>> block of underlined list items looks too cumbersome.  To be safe though I
>> would suggest that you underline the call to action but leave the rest of
>> the link text not underlined.
>>
>> Another option is to include an HTML arrow at the end of the link (try
>> &#187; or &raquo; )
>>
>> Clear  identification of link text is essential for WCAG compliance.
>>
>> Regards
>>
>> Richard
>>
>> www.website-accessibility.com
>>
>> *From:* Subramanian, Poornima (PCL) <psubramanian@hagroup.com>
>> *Sent:* Friday, January 26, 2018 10:10 PM
>> *To:* w3c-wai-ig@w3.org
>> *Subject:* Differentiating links from normal text
>>
>>
>> Hi, I would appreciate any design suggestion regarding “differentiating
>> links from normal text” for the below scenario -
>>
>>
>>
>> I was aware the WCAG recommendations on the links (i) no use of color
>> alone for links (ii) highlight links in different formatting while in
>> blocks of text
>>
>>
>>
>> In one of our test pages, there is a list of items with each item shows
>> the title, date, a call-to-action button (designed together as a link).
>> Here, the page contain mostly links in the form of list items.
>>
>>
>>
>> And, the designers think underlining the links will make it look
>> cumbersome visually.
>>
>>
>>
>> Couple of questions –
>>
>>
>>
>> 1.       Any design suggestions on how the links can be differentiated
>> in this example to make it compliant? (e.g. bold, underline the title)
>>
>> 2.      Is underlining or differentiating the links must or nice-to-have
>> for WCAG compliance?
>>
>>
>>
>> Best,
>>
>> Poornima
>>
>>
>>
>> *Accessibility Tester & Consultant*
>>
>>
>> The information contained in this email and any attachment may be
>> confidential and/or legally privileged and has been sent for the sole use
>> of the intended recipient. If you are not an intended recipient, you are
>> not authorized to review, use, disclose or copy any of its contents. If you
>> have received this email in error please reply to the sender and destroy
>> all copies of the message. Thank you.
>>
>> To the extent that the matters contained in this email relate to services
>> being provided by Princess Cruises and/or Holland America Line (together
>> "HA Group") to Carnival Australia/P&O Cruises Australia, HA Group is
>> providing these services under the terms of a Services Agreement between HA
>> Group and Carnival Australia.
>>
>
>
> --
> Andrew Cunningham
> andj.cunningham@gmail.com
>
>