Accessibility: aria-hidden="true" (hide for screen readers) with focusable elements (allow keyboard access)

Question

I want to hide this theme-switcher div from screen readers, as they are needed to change the theme colours. But it should be focusable for keyboard users.

My problem is, it is not allowed to have focusable elements inside an aria-hidden node.

Is there a workaround or best practice for this kind of problems?

<div id="theme-switcher" aria-hidden="true">
  <button>Light</button>
  <button>Dark</button>
</div>

Answer 1

In fact, you shouldn't hide the color switcher to scren readers. That's quite a bad idea, because ascreen reader user isn't necessarily completely blind.

You may have enough vision to see colors and have an use for the color switcher, but need a screen reader because you don't have enough vision to read text even with a zoom.

So, you'd better leave the color switcher as it is without hidding it to screen readers.

Answer 2

I think I found the solution.

By implementing a "skip to content" Link, this and any other blocks can be skipped. So there is no need, to add any aria-hidden tag here.