chapter27

You are all right if you code the interactive elements with the default properties of focus indicator. A focus ring or focus indicator is an outline that is displayed when the user moves to a link or input element with a keyboard. Every browser by default provides this focus ring on the element that is currently active or focused.

Some developers remove this focus ring anticipating that the UI is disturbed. The use of the CSS property outline: none will remove the focus ring to the interactive elements. This is absolutely a bad practice. This will cause severe problems for persons with low vision and those who have motor difficulties and depend on keyboard only to navigate the webpage.

Sometimes, the default focus indicator may not be clearly visible as it lacks enough contrast compared with the background color of the element. By increasing the intensity of the color of the focus ring, this problem can be solved.

Keep the following in mind if you want a best focus indicator for the website.

  1. The color of the Focus indicator and it’s background must have best contrast e.e 3 : 1.
  2. Consistent across the browsers i.e. If focus indicator for links is blue dotted outline, it should be same for Chrome, firefox, edge or internet explorer.
  3. Graceful degradation .e. should support older browsers.
  4. Need not be consistent for all types of elements.