How to let Users know Where They Are?

When you are navigating your web document using the Keyboard, is it visible enough? If it is not, this article is to convey that it really matters for anyone who relies on keyboard to operate the page. Especially low vision and sighted users. Thus, having a focus which is clearly visible and recognizable is important. It is also an accessibility requirement despite of the control element  

"Success Criterion 2.4.7 Focus Visible (Level A): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."

By default, browsers give the focus outline for the elements when those elements are focused using -webkit-focus-ring-color on the CSS3 focus pseudo class as below.

Outline-style: auto, makes each browser use their own style. When focused on the controls in Chrome, a blue outline line is displayed whereas in Firefox a dotted line is displayed as the outline.

Apart from having different outlines for each browser the default focus outline has its own issues. 

Issues on using default focus ring outline

1. Focus color doesn’t comply with the minimum non text contrast ratio (3:1), therefore users are unable to distinguish the focused and non-focused state
2. In the event of the button color being similar to the browser focus style and its color (E.g. Chrome browser), the states will not be distinguishable.

For a website to have a consistent look and feel across multiple browsers and to have the focused state visible, the browser default outline is not sufficient. It’s always best to practice enhancing the focus outline by adding a custom focus outline.

What do Custom Focus indicators look like?

Creating an outline (with outline, box-shadow, borders, etc.)

Changing the background color (if any)

Changing the color of the text (with text style ex: underline)

Defining Effective Focus outline controls

With CSS, you can make the focus outline more obvious and can add your own custom styles with these shorthand properties

There are other few key things that should be taken into consideration when applying well-designed focus indicators.  

• Good contrast 
• Complementary color scheme, shape and size for the element 
• Doesn’t need to be the same for all elements 
• Should be the same across all the browsers