Hiding the focus outline - accessibility considerations?

[Stanislav Khromov]

👋 I have a question regarding the focus handling. I found it to be a bit distracting in my app. Instead of disabling it altogether through <Route primary={false}>, I instead hid the focus outline for all elements like so:

<style>
  /* App.svelte */
  :global(:focus) { 
    outline: none; 
  }
</style>

I tried out the result in the Screen Reader Chrome extension and it seems to work as intended, ie. the element still pulls focus but without visual indication. I understand that losing a visual cue can be disorienting for some users, but are there any accessibility concerns in terms of screen readers when hiding the outline as above?

[mefechoel]

Hi there! The indicators are indeed often useless for screen reader users, but are a great help for keyboard users or people with an impaired eyeseight. That's why you should never disable focus indicators altogether.
You can however disable them for headings quite safely, as they are usually not focus targets anyways and on tab away from the heading will reveal where you are on the page.

So my advice would be to disable the heading focus like so:

:global(h1/* , h2, etc */):focus {
  outline: none;
}

And/or style the focus rings to your liking.

[Stanislav Khromov]

Thanks for your responses and additional info @mefechoel !