Is focus outline on tabindex="-1" useful?

I heard that:

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

However, in a situation where I have a top 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?