Use CSS to change the presentation of elements on keyboard focus
no. 051
Make sure CSS enhances visual feedback when an element receives keyboard focus
Often times, designers enhance the focus on active elements for the mouse using CSS, but forget to provide similar enhancements for users who do not rely on a pointing device for navigation. Consequently, sighted keyboard users only get a subpar experience that falls back to default behaviours, for which visual feedback is much less visible. As a result, the effect provided as a visual support to interaction is lost on anyone not using a mouse. Making sure the enhancement is provided on both hover and focus is important to make sure every user gets a similar experience while interacting with the content.
To do so, simply make sure that whenever visual feedback is provided on mouseOver, the equivalent feedback is also provided on focus. After all, if the desired effect is significant enough to pull in some CSS effort, why only go halfway and only provide it to mouse users? Making sure keyboard users also benefit from the effect will only improve their user experience and help them navigate through content more efficiently.
User Story
As a sighted keyboard [...]