2

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?

  • 2
    This is not off topic. OP is not asking about how to implement something. This is a question of accessibility, user expectation, web standards, and visual affordance—all of which are on topic for this site. Please don't vote to close just because you see tabindex="-1". – maxathousand Dec 19 '17 at 15:23
  • To wit ^ a perhaps little-known feature: you can open the close dialogue again and click Retract close vote. – msanford Dec 19 '17 at 21:25
  • 1
    I changed the title to look more on-topic :) – mik01aj Dec 20 '17 at 11:47
3

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.

  • Good point, I should focus the content. And I understand that removing focus outline from it is fine as it's not reachable by pressing <kbd>tab</kbd>. – mik01aj Dec 20 '17 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.