Top Menu

Focusing on your links

One of the easiest things to do, especially in the design and development stages of your website, is add focus to links. This is the first, of what I hope to be many, tutorials. I’ll talk you through why adding focus to links is so important from a usability and accessibility perspective, and how to do it. Anyone with a little website experience, should be able to follow this, as it uses basic HTML and CSS mark up only.

The Importance of Links
One of the most, if not the most important part of your website is your links. Links get users to your website and allow them to navigate around it. Without links the internet would be like the postal service trying to operate without addresses, utter mayhem. Designers usually include navigation bars to visually highlight important links within a website,much as I have done with this website. Colour and text decorations, such as underline, can also be used to highlight links within a website, this is done by default by the users web browser, if you have not specified how you would like your links to appear.

Link States
In terms of how links appear, using CSS you can style how a link appears according to the state it is in.

There are five states which are commonly specified for links:
a:link – a normal, unvisited link
a:hover – a link when the user mouses or hovers over it
a:focus – a link that has keyboard focus
a:visited – a link the user has visited
a:active – a link the moment it is clicked

Keyboard Navigation
Most of us are familiar with using with a mouse to navigate a website, but what happens if you cannot use a mouse, it breaks or you spill coffee on it. Fear not, if a website is designed in a usable fashion you will be able to “tab” through a website, or jump from link to link using the tab key on your keyboard, then all you have to do is hit the enter key when you reach the link you are looking for.

Give it a try, open this page in a new window and try tabbing through and hitting enter on links. You will notice when tabbing through this website that when you tab to a new link it highlights, much as it would if you hovered over the link with your mouse. These styling effects are achieved by adding the a:hover and a:focus state in your stylesheet, in my opinion both are equally important, however the a:focus state is often forgotten or neglected.

The ability to tab through website is useful not only to those of us that are coffee stained and chronically clumsy, older users and people with dexterity impairment may find it easier to tab through a website than to use a mouse. Visually impaired people will often use a keyboard to navigate in conjunction with a screenreader or other assistive technology, putting it simply there is very little point using a mouse if you can’t see where you are pointing it (I should say at this point, that some V.I.P.’s can successfully navigate using a mouse along with zoom and magnifying functions, everyone is different!). There are also many, many assistive technologies designed for people with a variety of disabilities that rely on the ability to use keyboard navigation.

How to achieve Focus on your Links
A standard link in your website will look something like this:

My Homepage
To style this link according to which state it is in, you can include the following code in the section, or stylesheet of your webpage. These are the stylings I used for this webpage, simply alter color etc., to your preferences.

/*Important! style tags only used if included in section*/

/*Link as displayed normally*/
a:link {color:#900090;

/*Link as when hovered over with mouse, or focused on with keyboard*/
a:hover, a:focus {color:#072182;

/*Currently active and previously visited link*/
a:active, a:visited {color:#000;

So that is it, how to create a focus state on your links. Feel free to post comments or questions below, I’d love to hear from you!

Post by Katie Bourke of Adaptable Solutions. For more information visit

Small Business Can Newsletter
Small Business Can is run by businesspeople for businesspeople. We share our experiences, successes and failures. Sign up for our insightful (and sometimes funny) newsletter and stay up to speed with all the latest insights.
No comments yet.

Leave a Reply