0

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>
Vorname Nachname
  • 139
  • 2
  • 7
  • 1
    The question is why are you hiding the theme switcher from screen readers? Not all people who use a screen reader are blind and being able to switch to dark mode may be beneficial to those who use a screen reader to aid comprehension. Remove the `aria-hidden` attribute. As for if you do need to hide content with `aria-hidden`, adding `tabindex="-1"` is the solution as it stops the buttons being focusable. – GrahamTheDev Aug 15 '21 at 06:20

2 Answers2

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.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
0

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.

Vorname Nachname
  • 139
  • 2
  • 7