Keyboard Accessibility and Lost Focus

Visual indicator is must for a keyboard user, to identify an active element, so that the user can press the corresponding desired keys, to interact with the active element.

For example,

• pressing space on a checkbox toggles the checked status
• pressing down arrow on a select displays the options list
• pressing space/enter on a button activates it.

Without a visual indicator a keyboard only user has no clue to identify the active element.

A keyboard user, uses tab to navigate to the focusable elements in the UI. A keyboard user, may also use up/down/left/right arrow keys for navigating between groups or widgets, for example, radio buttons, tab panel, suggestions in a typeahead etc.

When a user presses tab, browser focuses the next focusable element, in the tab order. By default browsers highlights any focusable element, with a default focus indicator, when it is focused.

But sometimes the default focus indicator is suppressed, via :focus {outline: none}, leading to an inaccessible UI for a keyboard only user.

Would you use * {cursor: none}? Why :focus {outline: none} then?

Consider focus indicator for a “keyboard only” user is analogous to mouse pointer/hover indicator for a “mouse only” user.

If you want to suppress the default focus indicator, please compensate with some visually distinguishable style.

I hope by now you have understood the importance of visual focus indicator. If not, keep reading and try out the examples.

The example are targeted for non-touch interactions, to emphasize keyboard accessibility.

Why visual focus indicator is so important?

Let’s imagine a hypothetical situation, where mouse (and related input devices, for example trackpad) is functional, but the mouse pointer is not visible. Refer CodePen example - No mouse pointer - No hover effect, for the above stated hypothetical situation. Can you click the “Click me” button at CodePen example - No mouse pointer - No hover effect?

See the Pen No mouse pointer - No hover effect by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

I could not click the “Click me” button. I could not figure out, if the mouse pointer is over the button.

You can resize the window to approximately guess the mouse pointer, but that’s an awful user experience.

A :hover style might have been helpful. Refer CodePen example - No mouse pointer - But hover effect.

See the Pen No mouse pointer - But hover effect by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Though it has not created a great user experience, but much better than the previous example. I was able to click the “Click me” button.

As stated earlier, a keyboard only user, uses tab (primarily) to navigate between focusable elements and a focus indicator identifies the active element.

Can you navigate to “Click me” button via tab, and activate it by pressing space/enter at CodePen example - No mouse pointer - No Hover effect - No Focus Indicator?

See the Pen No mouse pointer - No Hover effect - No Focus Indicator by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

There is no easy way, but to try back and forth, and guess when the “button” is focused. Imagine when there are several elements. One has to keep a mental map and order of the focusable elements. It can be tedious and not a good user experience.

Make sure any active element is clearly distinguishable. Good to have :focus & :hover style go hand in hand.

Refer CodePen example - :hover and :focus goes hand in hand.

See the Pen :hover and :focus goes hand in hand by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Lost focus

When ever the active element can not be identified, it results in lost focus.

So far we have seen “Lost focus” happens when there is no focus indicator, but lost focus can also happen

• when background and focus indicator color is same
• when invisible elements are focused

Non distinguishable focus indicator

Refer CodePen example - non distinguishable focus indicator in chrome/safari, the default focus indicator is not distinguishable in Chrome/Safari

See the Pen non distinguishable focus indicator in chrome/safari by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

It would be better add a custom focus indicator in such scenario, refer CodePen example - custom focus indicator.

See the Pen custom focus indicator by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Invisible focusable elements

Refer Codepen example - Invisible focusable element.

See the Pen Invisible focusable elements by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Though the intermediate buttons are not visible they are focusable and thus reachable via tab, resulting in lost focus.

If you want to hide an element use display:none or visibility:hidden, so that the elements are not only invisible, but also removed from the tab order, and can not be focused.

Refer Codepen example - No Invisible focusable element

See the Pen No invisible focusable elements by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

When ever there is an invisible focused element, it results in lost focus.

Conclusion

Avoid lost focus and enhance users’ experience.