Blog Archive

2009-12-07

Firefox and Internet Explorer user style sheet for better keyboardnavigation

When you tab through a web page with your keyboard, a visual focus will move through all the links and form controls in the page. Modern browsers such as Opera, Safari, and Google Chrome and most of mobile browsers provide a visually distinctive focus. This clear focus dramatically enhances usability and accessibility of keyboard users (eg. people of visually impaired or low vision) as well as general convenience for majority of users. However two widely used browsers, Internet Explorer and Firefox stick to the traditional, not very conspicuous visual focus of gray dotted outline. This faint outline focus often makes me get lost when I use my keyboard for the within-page navigation. Compare the following default visual focus of each browser (for Windows):

Prominent visual focus of three modern browsers
Apple Safari Google Chrome Opera
bluish rounded thick focus of Apple Safari yellow rounded focus of Chrome browser thick and rounded bluish focus of Opera browser
Marginally distinguishable visual focus of two major browsers
Firefox Internet Explorer 8
gray dotted focus of Firefox gray dotted focus of Internet Explorer 8

To get a clearer visual cue of where I am in a web page, I set the following user style sheet for Firefox and Internet Explorer.

:active, :focus {
	outline-width: 2px !important; 
	/* outline (unlike border) property does not take the space */
	outline-style: solid !important;
	-moz-outline-radius: 4px;
	/* this affects Firefox only, it makes the outline rounded  */
}

Refer to the articles below to get information about how to set your user style sheet in the two browsers:

Once you configured your user style sheet successfully, all the objects (including text links, image links, radio buttons, text input fields, image type buttons, etc) will be clearly outlined and stand out! Now enjoy your keyboard navigation and never get lost within a page!

Improved visual focus of two major browsers
Firefox Internet Explorer 8
rounded outline focus of Firefox thick outline focus of Internet Explorer 8

Be careful that the Internet Explorer version 6 and 7 do not support CSS outline property.