Jesper Tverskov, August 30, 2006, 3. edition

Use inverted colors to highlight the link having focus

It is often difficult to find the cursor when a web site is navigated using the keyboard. Where is the link having focus? With CSS the author of a web page can adjust how the the link having focus is visualized. Using inverted colors are the best way to highlight it.

Many users have problems using the mouse. They want to use the mouse as little as possible in order to recover from RSI or to prevent RSI. Many users with disabilities find it difficult to control the mouse. They have to rely on the keyboard as much as possible or even as the only way of navigating web sites. Users without disabilities or RSI can navigate the web more efficiently if they can use both the mouse and the keyboard.

To navigate a web site using the keyboard, you press the tabulator key to move the cursor forward from link to link or SHIFT+TAB to move the cursor backward. In some browsers you use other keys. In Opera you use the letter "a" to tab links forward and the letter "q" to tab links backward. When you want to follow the link having focus you press ENTER. The link is then "active" until the new page has loaded or the same page has reloaded.

1. Where is the cursor?

When navigating a website using the keyboard it is important, that it is easy to spot where the cursor is. That is to identify what has focus, most often a link, in order to move forward to the next link or to move backward to the previous link or to press ENTER to follow the link.

Most browsers indicate the the link having focus by a dotted rectangle around the link text. If icons or images are used for links there is a similar dotted line around the link having focus. Unfortunately this standard way of indicating the link having focus is not always easy to spot in a web page. Users want to be able to spot the cursor right away. It is not something you should have to look for. It can be very difficult to find the cursor if the link texts or icons are small and if you have links and navigation all over the web page.

2. The link having focus in CSS

By using CSS (Cascading Style Sheets) the authors of web pages can make the link in focus easier to spot making it less difficult to navigate the web by the keyboard. Most browsers like Mozilla Firefox support the CSS pseudo class :focus,

but Internet Explorer has for some unknown reason implemented the :active pseudo class as if it was :focus. Web pages using a:focus degrades gracefully in browsers that do not support the :focus pseudo class: they show the usual dotted rectangle around the link having focus.

Authors of web pages are free to find the best way to highlight the link in focus. I propose to use inverted colors that is to invert background color and text color. In many cases one should stick to white text color and blue background color even when the link colors are not blue on a white background.

White text color and blue background-color is also how inverted colors work in the address line of most browsers in Windows. The latest versions of the Opera browser even use inverted colors (white text color on blue background-color) as default for links having focus.

The CSS rule for a:focus could look like this:

a:focus {color: white; background-color: blue}

3. Being nice to Internet Explorer

As mentioned earlier, Internet Explorer uses the pseudo class :active as if it was :focus. If we want to provide inverted colors for the link having focus in Internet Explorer we should make our CSS rule look like this:

a:focus, a:active {color: white; background-color: blue}

4. Uptimized navigation

Navigation is one of the most important aspects of both accessibility and usability, and the use of inverted colors for the link having focus makes life much, much easier for keyboard users. Inverted colors for the link having focus is a good test and easy to apply. If the keyboard user has problems finding the link that has focus it is very difficult for a website to claim to be usable and accessible.

My website, XMLplease.com, uses inverted colors (blue on white) for highlighting the link having focus and the "active" link. Go to one of my webpages having many links and try "tabulating" the cursor from link to link in order to see how much easier it is to navigate a website with the keyboard when inverted colors are used for the link having focus.

Appendix

Revision history

2007-02-20

Article has been transferred to www.xmlplease.com/inverted from www.smackthemouse.com/inverted. The old URL is redirected for the time being.

2006-08-30

Third edition published replacing the second edition. The title of the article has been changed to "Use inverted colors to highlight the link having focus".

Thanks to feedback from a reader, I have corrected the article giving Firefox credit for actually using the right CSS pseudo class and I have changed the title of the article accordingly.

2006-05-25

Second edition published with the new URL: http:// www.smackthemouse.com/inverted replacing the original file still being redirected for the time being. I have made several improvements:

Originally I proposed to use inverted colors or white text color and black background-color for the link having focus. In the updated article I propose to use inverted colors or white text and blue background-color. Blue background-color is more consistent with how inverted colors are used in the browser's address line (default in Windows XP) and in the browser Opera for the link in focus as default.

2003-04-25

First edition published with the title "Use inverted colors to highlight the active link" and the URL: www.smackthemouse.com/20030425.

Updated 2009-06-12