:focus isn't working but :hover works fine

Question

I'm trying to make my website accessible for users that can only use the tab key. The problem I'm having is that when I try to select my floated div with the tab key, the :focus in css isn't triggered; I don't know why it isn't triggered.The hover with the mouse works fine, I find this very strange. I hope somebody can help me :)

http://jsfiddle.net/4fMex/

<a href="#">
<div >
<h3>lalala</h3>
<img alt="picture" src="http://boncia.co/wp-content/uploads/2013/12/landscape-47.jpg"/>
</div>
</a>


img{ 
width:300px;
}


div{
width:50%;
border: 3px solid black;
float:left;
}

div:hover , div:focus{
opacity:0.6;   
}

Answer 1

In your specific case, you can do something like this:

a:focus div {
 opacity:0.6;
}

Note that your a should have some tabindex assigned to be focusable.

Demo.

Updated: Looks like giving a div some tabindex also make it focusable. Although I'm not sure if this works cross-browser. So you can use your original code and just add some tabindex for the div instead of the a.