This document gives information about the related Monsido checks:
Links inside text are distinguishable.
What
If a link is placed inside a paragraph of text, it must be clear and obvious to the visitor that the link looks visually different than the surrounding text. This will help visitors recognize that a link is present.
Why
Links have a different behavior than static text because they can be interacted with by the visitor. They may also have important semantic meaning as they point to additional information or resources that would benefit the visitor. Therefore, it must be clear for a visitor where on a web page links are located. Static text and links should be styled differently from each other to achieve this.
User story
Emily, 63 years:
“When reading through a web page, I get very annoyed if I cannot tell where links are located. It can be very difficult to tell links and regular text apart if they don't look much different. Another problem is that I sometimes accidentally click a link as I scroll on my phone because I can't tell that it's a link”.
Examples
In this section you'll find examples of succesful and unsuccessful implementations of this check.
Example 1 (succesful implementation)
The following example passes because the link inside the text paragraph is visually distinguishable from the surrounding text.
<body>
<p style="background-color:#ffffff;color:#000000;">
Read more about <a style="text-decoration:none;border-bottom: 1px solid"
href="https://monsido.com/">Monsido</a> and see how we can help you.
</p>
</body>
Example 2 (unsuccessful implementation)
The following example fails because the link inside the text paragraph is not visually distinguishable from the surrounding text.
<head>
<style type="text/css">
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>To find out more about the <a href="rain_in_spain.htm">
rain in Spain</a> there are many resources.</p>
</body>
How
How to fix it:
Identify links placed inside paragraphs of text. You may use the Monsido Browser Extension to highlight those links on your web pages.
If a link is placed inside a paragraph of text, it must be clear and obvious to the visitor that link looks visually different than the surrounding text. This check will pass if one of the following criteria is met:
The difference in luminosity between the link and surrounding text is at least 3:1.
The link or surrounding text is bold and the other is not.
The link or surrounding text is underlined and the other is not.
The link or surrounding text has a bottom border and the other does not.
Log into your CMS (website builder software) and apply the required styling to the link or surrounding text.
Who in your team can typically fix this?
Web team; (Visual Design and front-end developer) for changes in your CMS/website template.
Content Authoring; when special styling is applied via the content.
Additional Information
This section contains useful resources for this subject.