Styling image link in focus

Question

I'm trying to improve accessibility on a WordPress site where 'focus' is missing from the stylesheet.

I understand how to style text links, but I can't seem to apply the same to image links. I'd like to put a dashed line beneath images when in focus.

Here's what I've put - pretty simple:

a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}

It works for hover, but not focus!

Any ideas?

Answer 1

Just move the pseudo-classes to the a element:

a:hover img {border-bottom: 3px dashed #000;}
a:focus img {border-bottom: 3px dashed #000;}

Answer 2

User agents generally do not consider img elements as accepting focus. From the w3 CSS spec:

The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

You can enable focus on img elements by adding a tabindex attribute (<img src="foo.png" tabindex="0" alt="photo of foo">) but I wouldn't recommend it unless you have some specific reason for doing so. Unless the element actually accepts keyboard input adding it to the tabbing order adds no benefit for AT users (and indeed, may be confusing).