Link & the forgotten accessibility

One of the most common mistakes: setting a color for a link, but not adding :hover, :focus and :active states.

Bad example

a {
color: #ca0000;
text-decoration: none;

/* And that is the end of link styling */

What is the problem and how to fix it

  • Without the missing states, our link won't be accessible, users might get confused while navigating through our website with a mouse or a keyboard, because they won't be able to identify what is clickable and what is not
  • By default, browsers set text-decoration: underline; to links, but removing this property can also lead to confusion
  • Try using a color which fits with your design but still makes it obvious if a text can be clicked. In this blog, the red color is consistent for clickable items
Try navigating on this page by pressing the Tab key and see what happens!

Good example

a {
color: #ff0000;

color: #a60000;
text-decoration: none;

a:active {
color: #000000;
background-color: #a60000;