A small piece of inline Javascript that will remove the unsightly dotted lines created around clicked links.
This is a small piece of inline Javascript intended to remove the dotted outline created when a link is clicked.
onfocus="if (this.blur) this.blur();"
in situ:
<a href="#" onfocus="if (this.blur) this.blur();">Link</a>
N.B. There are accessibility issues surrounding the removal of the dotted lines. Please take this into account. A quick look at our source code will show you that we only use this method on navigation, for aesthetic purposes.
James
What is the acessibilty issue?
James rated 3/5
Harry
Users who are navigating with a keyboard need to be able to see the link, which is indicated by the lines. Try pressing 'tabs' in this page and you'll see dotted lines on text links.
Harry rated 3/5
Jens
Why do you need that much JavaScript code, just define in your css file: a { outline: none; }
Jens rated 3/5
Harry
@Jens: Very true. At the time I started implementing this snippet the CSS
...{ outline: none; }wasn't as widely supported as it is now. Thanks!Harry rated 5/5
Troy
I recently blogged about this, and I think you should suggest using unobtrusive javascript to achieve this effect. e.g.
$('#hd h1 a, #nav a').click(function(){ $(this).blur; });I prefer turning it off for click actions because you know where your clicking. This way users can still use the keyboard to navigate. Also, using the css outline property you can't target just click actions so you lose keyboard access, plus it isn't widely supported.Troy rated 3/5
AVVStudios
17th Nov 2007 19:23Hey...
works perfect harry :)
Thanks
AVVStudios rated 5/5
Harry
22nd Nov 2007 17:25@AVV:
Don't act so surprised :P
Harry
Harry rated 3/5
AVVStudios
17th Feb 2008 19:09Ha Ha...
would i ? i know your stuff is good :)
AVVStudios rated 5/5
Comments Closed - Spam :(