可访问性-在TAB键上触发悬停和焦点事件

Question

I've been dabbling in simple CSS transitions and hover events etc recently. I notice that when you press the TAB key it generally finds links which is fine but...

If I have a hover event, like a piece of text is revealed or something similar, how can I ensure that pressing the TAB key will trigger hover and or focus events?

This is because I have a page full of squares made up of DIVs that look similar to this:

When you hover over this block with your mouse it changes color via a hover event, essentially to visually inform the user that the element is in some way interactive.

Is there a way I could trigger the hover event with the TAB key or even the arrow keys? My reasoning is because if for some reason you did not have a mouse or touch device you could potentially miss out on content.

Amending my question slightly

So the TAB key is treated as a :focus event and works well when you give a link a :hover state but is it possible for the TAB key to acknowledge DIV elements?

Answer 1

With CSS you can use also :focus , try this:

 div { float:left; margin:2px; } a { display:block; height:100px; width:100px; line-height:100px; text-align:center; background:purple; color:white; transition:.3s linear; } a:hover, a:focus { background:orange; } 

 <div><a href="">item1</a></div> <div><a href="">item2</a></div> <div><a href="">item3</a></div> <div><a href="">item4</a></div> <div><a href="">item5</a></div> 

Answer 2

This is with respect to your last comment:

So the TAB key is treated as a :focus event and works well when you give a link a :hover state but is it possible for the TAB key to acknowledge DIV elements ?

I believe you are looking for tabindex="0" . Adding that attribute will make your element capable of receiving focus.

So <div tabindex="0">Hello World</div>

The tabindex doesn't have to be 0. It can be negative, 0, or a possitive integer following these rules:

From MDN on tabindex

• a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
• 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
• a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.