Is focus outline useful on elements that can't be focused with tab?

Question

I heard that:

• using tabindex="-1" makes an element not accessible via tab, but still focusable manually
• focus should be visible

In a situation with navigation on top, with links that cause the page below to change without a full page reload, the default behavior is not ideal as when the link is pressed, the focus stays on the link, and is would be better to focus the content instead (so that the user doesn't have to tab through all the remaining navigation links).

However, when I set tabindex="-1" on the header and I focus it from JS, it has an ugly outline around it. It's probably OK for keyboard users but it looks ugly and unexpected when you're just using mouse to click the navigation link.

So, is it OK accessibility-wise to remove the focus outline from the header?

Answer 1

When your views change move focus to the content of the page that just loaded. Doing so will:

1. sidestep your "leave the focus on the header" question, and
2. help direct the user (who may be using a screen reader) to the content that was just updated.

---

Additionally, I'd like to emphasize: the focus outline is a huge accessibility feature for keyboard users, and ensures that users can navigate your site without needing a mouse. It should not be removed without a substitute styling to indicate focus. Browsers and OSs handle mouse- and programmatically-focused elements in many different ways, but tab presses should always, always, always elicit a visual focus indicator on focused elements.