CSS Hell

Collection of common CSS mistakes, and how to fix them

Link & the forgotten accessibility

Posted on by cat_a_flame

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;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

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

Resources