Main 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 LinksOne 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 StatesIn 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 linka:hover – a link when the user mouses or hovers over ita:focus – a link that has keyboard focusa:visited – a link the user has visiteda:active – a link the moment it is clicked

Keyboard NavigationMost 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 LinksA standard link in your website will look something like this:

My HomepageTo 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.

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.

About admin

The idea for Small Business Can comes from an Ulster Bank initiative when we went and talked to hundreds of businesspeople and asked them about the types of business supports they most valued.

Upcoming Events

About Small Business Can

The idea for Small Business Can comes from an Ulster Bank initiative when we went and talked to hundreds of businesspeople and asked them about the types of business supports they most valued. The majority said that they valued the insights of other businesspeople the most. We came up with smallbusinesscan.com, a site run by businesspeople for businesspeople. Read more...