I've been struggling with an issue for a couple of days now and it's finally got me beat.
I have a link which has an internal img element (see below) and I am trying to enable the website to be keyboard friendly.
Currently when I tab to the link, I can press enter and it will work however, visually I get the following result:
<a href=""><img src=""></a>
This is obviously not ideal and I want the focus border to surround the whole image. To rectify this I tried giving the <img> a tabindex of "0". This resulted in the border being correctly displayed however, when I press "Enter", the link is not triggered - This seems somewhat obvious as the <img> is not selected not the link.
How do I get the border to surround the image and also trigger the link when "Enter" is pressed?
p.s. The screenshots were done in Chrome but this is also required to work in a slightly older version of webkit.