What is Focus in Web Accessibility?

What is Focus?

In web development, focus refers to the UI element that the user is currently interacting with or selecting. Keyboard users can navigate between elements using the Tab key, and it’s essential to visually indicate which element is focused to ensure smooth interaction. Without focus indicators, accessibility issues may arise. Being aware of scenarios where focus is blocked can help improve web accessibility.

Scenarios Where Focus is Blocked

1. outline: none

• The outline is a default browser-provided style that visually indicates focus when navigating through elements using the Tab key. It’s an essential visual indicator of which element is currently focused.
• Using outline: none removes the default outline style, making the focus invisible.

Alternative: If you want to remove the default outline, provide an alternative visual indicator. For example:

button:focus {
  outline: none;
  box-shadow: 0 0 3px 3px rgba(0, 0, 255, 0.5);
}

2. hideFocus

• This is a non-standard attribute that works only in Internet Explorer (IE). It hides the visual focus indicator even when an element is focused.
• It is not supported in modern browsers.

<div hideFocus="true">Content</div>