Link Issues
Links are not clearly identifiable
“Links are not clearly identifiable” is a common Siteimprove issue. The links that have been flagged are usually using color alone to distinguish themselves from the surrounding text.
For usability and accessibility, it’s best to underline links. If you decide to use color alone to identify links, make sure that the link color has sufficient contrast with the surrounding text color and background color. Use WebAIM’s Link Contrast Checker to verify that your colors meet accessibility requirements. To use the checker, you will need to enter the hexadecimal codes for your text, link, and background colors. (Watch the Color Tools Fix-it Clinic video to learn how to use ColorZilla, which includes a color identifier.)
The link contrast checker results show that the colors used in our example fail two of the three checks. You must use colors that pass all three checks. On a white background, using a darker body text color will make it easier to find an accessible link color.
In addition, links must change appearance (e.g., add an underline, change font, etc.) on hover and keyboard focus. In many content management systems, you can add custom CSS. The following code adds an underline on hover.
a:hover {
text-decoration: underline;
}In WordPress, look for the “Additional CSS” section in the Customize submenu. Select “Publish” after entering your custom code.
References
- Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them
- Use of Color (Level A)
Link missing a text alternative
Often, this error refers to a linked image that is missing alt text. Text alternatives for images provide concise descriptions for users of assistive technology. Learn more about alt text and add alt text to your image to fix this issue.
Social media icons
If you use font icons as links to your social media sites, you will need to add an accessible name for each icon. One way to do this is by adding an aria-label and title to your <a> tag.
<a href="https://www.facebook.com" aria-label="facebook" title="facebook"><i class="fa-brands fa-facebook"></i></a>