Visually highlight interface components when they receive focus
no. 042
Make sure active elements are highlighted when they receive keyboard focus
Users who can’t use a mouse for whatever reason will often navigate through a page using their keyboard’s tabulation key, jumping from one active element to another (form controls, links and so on), based on source code order. Focus is generally displayed as a blinking vertical bar at the insertion point in text field, or as a dotted focus highlight rectangle on a link. This focus indicator needs to be easily noticeable, so progression through content can be effortlessly followed.
To do so, simply make sure that active elements receiving focus are highlighted in some way with a visible focus indicator. Most times, nothing needs to be done, as the browser’s default focus indicator proves sufficient. But depending on CSS layout, colors and presentation built on top of the HTML, this focus might be difficult to notice. In such cases, it can be useful to enhance the focus indicator through CSS, so it stands out better against the background of the element that currently has focus. Doing so will ensure users who can’t rely one a mouse will locate where the focus [...]