Focus Indicator

Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)


A focus indicator is a dotted or solid line present around the tab-able elements such as links, buttons, and form fields. While navigating the page through keyboard tab key, the focus indicator appears around elements when they receive keyboard focus to indicate where the current keyboard focus is. All major browsers like Firefox, Chrome, Internet Explorer and Safari shows a thin dotted or solid line around the elements when they receive the keyboard TAB focus. But the focus indicator look different in each of the browsers. For example, Internet explorer and Firefox shows a dotted line where as Chrome shows a blue solid line.

All elements which are interactive with mouse should be operable using keyboard as well. All those elements which are operable with keyboard should have a visible focus indicator when they receive keyboard focus.

Benefits of Focus Indicator:

                     A visible focus indicator not only helps users with certain disabilities but also helps normal users to know where the current keyboard focus is when navigating the page through keyboard alone.

Imagine you are in internet café where mouse is not responding. In such situations you rely on keyboard to navigate the page, fill forms and submit the application. If you have to submit a form but there is no visual keyboard focus indicator around elements, then you might not know whether the keyboard focus is on button or when to hit the enter key. It may cancel the application all together if you submit the form but focus is on another button.

Following are different groups who majorly get benefited with presence of focus indicator:

Motor – Users who cannot use mouse and completely rely upon keyboard to navigate the web page and access interactions present in it.

Visual – Users who have low vision use screen readers often and keyboard to navigate the web page.

Cognitive – Users with memory limitations may lose the track they are working on.

CSS Outline property

What if we don’t like the default dotted focus indicator and want to create something fancy? Can an author or developer create a customized focus indicators for interactive elements? Yes, a customized focus indicator can be shown using “outline” which is a CSS property that draws a line around the elements.