8 April 2008

outline:0

There is nothing more annoying for those who wish to navigate a website using the keyboard than the extensive use of outline:0 in CSS code. For a more detailed explanation of what this is and what it means, I suggest you read this blog post.

Although I luckily do not suffer from any form of disability and do not actually require any effort to be made by a web developer towards accessibility, I do like to browse using the keyboard on occasion and this can be a highly frustrating problem.

CSS reset files such as the one mentioned in the post can leave developers without a full understanding of the nuances of the platform they are developing for. It is at least in part for this reason that I dont use a CSS reset at all.

My message to all would be to not remove this extremely useful and built-in behavior but actually to enhance it. Try navigation the London 2012 website with the keyboard (a site I led the development on) to see how nice it is to have the outline behaviour enhanced rather than removed.

3 comments:

Adam said...

Just when you think you know all the little tricks about CSS, this little beauty comes along :)

Neil said...

The main thrust of the AIM article is that sighted keyboard users have no visual indicator of the tabbed/focused element. In the 2012 site focused/active elements are styled and have a visual indicator of a changed background and text color. Aesthetically the outline looks good for the 2012 site, however if the design is different and focused links look cluttered with the outline and alternative background/text colours in place, then i think there is a case for using outline:0.

Neil said...

outline is not supported in IE 6 and 7, so it would be a CSS progressive enhancement if you choose to use it.