Hi again!

I’ve just learned a couple of new tweaks you can make to your CSS to create accessible content and I want to share them with you.

About Link States

Although I’ve been working as a technical writer for several years now, I never had anything to do with link states. Until now. I first learned about them while attending the Deque accessibility course I told you about in a former post, and I will make sure I use them from now on.

Link states are the different states that links can exist in, and they can be styled using pseudo-classes. This is very useful to create accessible content, since you can apply different attributes to the pseudo-classes to highlight, underline or even change their colour and background and help people with visual impairments to better recognise them.

You can configure the behaviour of the following link states:

• Link: default state. How links look like when you access a page.
• Visited: The state of a link after you click on it (it exists in the browser’s history)
• Hover: The state of a link when you hover over it with the mouse pointer.
• Focus: The state of a link when you put the focus on it with the keyboard (HTMLElement.focus())
• Active: The state of a link when you click on it.

To improve accessibility, it is always a good idea to add an “underline” text decoration (text-decoration: underline,), at least to the hover and focus states.

About Colour Ratios

Regarding colour ratios for enhancing the visibility of the links, a minimum ratio of 4.5:1 is recommended in a hover/ focus / default state.

How to Define Link States in the CSS

You can group states with the same definitions in your css. This is an example for “href” links:

a .link .visited .active

color:  #colourcode 

text-decoration: none

a .hover .focus

color:  #colourcode 

text-decoration: none

Resources

The following pages may be useful to check colour ratios and other accessibility-related topics:

• https://dequeuniversity.com/color-contrast
• https://www.colour-blindness.com/colour-blindness-tests/ishihara-colour-test-plates/
• https://coolors.co/
• https://github.com/ThePacielloGroup/CCAe/releases/tag/v3.1.1
• https://toolness.github.io/accessible-color-matrix/
• https://developers.google.com/style/accessibility

By the way, I’ve seen today that the Chrome 83 update comes with a new feature to emulate vision deficiencies from the rendering tab (to get a visual approximation of how people with vision deficiencies might experience your site). I’m sure it’s worth giving it a try!