Standards, BEST PRACTICE, accessibility, usability, XML
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.
- Where is the cursor?
- The link having focus in CSS
- Being nice to Internet Explorer
- Uptimized navigation
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 easy to spot in a web page in most cases. 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 Sheet) 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. A browser like Mozilla Firefox supports the CSS pseudo class :focus, but Internet Explorer has for some unknown reason instead 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 SmackTheMouse.com uses inverted colors (blue on white) for highlighting the link having focus and the "active" link. Try to tabulate the cursor from link to link on this web page in order to see a demonstration of how much easier it is to navigate a website with the keyboard when inverted colors are used to visualize the link having focus.
Copyright © Jesper Tverskov, 2006
Last updated 2006-08-30
[+] Appendix