Don’t Make the Target URL the Actual Hyperlink Text

 

Whenever possible and appropriate, the visible link text should be readable text and not the same as the hyperlink text. Some hyperlinks are very long and become cumbersome to display and read on the page. There are times when it is appropriate to display the link text as the actual URL, and in those cases it is fine to do so.

checkmark-smallThe link text is short and descriptive and lets the user know where it will be taking them.

Source Code

<a href="https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">NC State Color Palette Accessibility Evaluator</a>

x-smallWhile the link will take the user to the correct location, determining what the link actually does can be challenging.

Source Code

<a href="https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1">https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1"</a>

Implementation

https://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?&primary=CC0000,000000,FFFFFF&secondary=383838,666666,CCCCCC,E1E1E1,5C5541,666633,556677,A20000&tertiary=A79574,C5BD9D,E5E1D0,778855,99AA77,CCDDAA,67849C,CC9900&level=AA&ncsu=1