How to hide an element and all its children from screen readers?

How to hide an element and all its children from screen readers, as well as prevent access with the keyboard?

I'm working with accessibility and on the pages I'm maintaining there are advertising banners that, unfortunately, I can't simply remove, so I need some way to make the screen reader not scroll past these banners.

I've already tried the negative tabindex and aria-hidden, but some elements within the advertising banner are still accessible through keyboard navigation

This is what the inert attribute is intended for:

all of the element's flat tree descendants […] are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.

According to MDN, the feature has full browser support today.

Blocking interaction for keyboard, but not for pointer devices or touch is not reasonable. In a multi-device world, we need to create resilient designs, that don’t assume what devices users might use. This is especially important when it comes to assistive technology.

Should you hide ads from screen readers?

While I recognise the probably good intention to not bother users of assistive technology (AT) with ads, and for once provide a probably even better user experience, there are caveats.

About 20 % of screen reader users are not blind.

This means they might be attracted and intrigued by the often flashy content and would want to figure out what they are, if they can’t properly see them.

Therefore, it’s important that visually accessible content (not blurred out) also stays accessible to AT.

The better alternative for ads would probably be to use a proper landmark and headline to allow to bypass blocks but recognise what users are dealing with.

For less experienced AT users, you might even add a skip link.

<aside aria-labelledby="ads-title">
  <h2 id="ads-title">Advertisments</h2>
  <p><a href="#after-ads">Skip advertisments</a></p>
  …