How can I turn off focus when using the Tab key in CSS?

Turning off the focus outline when using the Tab key in CSS can be achieved using the outline property. However, it's crucial to consider accessibility when doing so. Here's how you can manage focus outlines:

1. Using `outline: none;`:

- The most straightforward way to remove the default focus outline is by setting the outline property to none. This will remove the visual indicator when an element is focused via the Tab key.

- Example:

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: none;
}

2. Accessibility Concerns:

- Removing the focus outline can severely impact accessibility, especially for users who rely on keyboard navigation. Without a visual focus indicator, these users may not know which element is currently selected.

3. Providing an Alternative Focus Indicator:

- Instead of removing the focus outline entirely, it's best practice to replace it with a custom focus indicator. This ensures that keyboard users can still navigate your site effectively.

- Example using a border:

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border: 2px solid #007bff; / Example focus color /
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); / Optional: Add a subtle shadow /
}

4. Using `focus-visible`:

- The :focus-visible pseudo-class is a more modern approach. It only applies the focus style when the focus is visible to the user, typically when using the keyboard. This helps avoid unnecessary focus styles when clicking with a mouse.

- Example:

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #007bff; / Example focus color /
}

5. Best Practices:

- Always provide a clear and visible focus indicator for keyboard users.

- Use :focus-visible when possible to avoid unnecessary focus styles.

- Ensure the focus indicator has sufficient contrast against the background to be easily seen.

In summary, while you can use outline: none; to remove the default focus outline, it's crucial to replace it with a custom focus indicator to maintain accessibility. Using :focus-visible is a good way to provide focus styles only when needed.

Learn more about this