I heard that:
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?