Set text for screen reader and hide children from screen readers

Question

I have an iframe, inside which arbitrary content is served. I want to ensure content within the iframe is not accessible to screen readers, and specify what screen readers should read out when the iframe is selected.

My expectation is when tabbing through different elements on the page, myDiv is selected as a single unit, and it reads out Unknown content .

I tried the following

<div id="myDiv" title="Unknown content">
  <iframe id="myIframe" aria-hidden="true">
    {arbitraryContent}
  </html>
</div>

Problems I face with this are

1. Not all content within the iframe are being ignored. Perhaps that is because aria-hidden does not work with focusable child elements.
2. Unknown text is not always being read, especially if the child elements are focusable.
3. I also tried setting tabIndex=-1 on the iframe. This however causes all the elements (including myDiv ) to not be selectable by keyboard.

What is the right approach to achieve what I am looking for?

Answer 1

If you prevent the screen reader from reading the entire iframe and if it still has focusable elements, yes, you have a fatal accessibility problem: you can focus something but the screen reader isn't allowed to tell what is focused. So what to do ? Should it say nothing, or go against what you have defined ?

Technically, it means that there shouldn't be any focusable element inside aria-hidden=true . You must ensure that it never happens.

However, the good question you have to ask yourself is why do you want to completely hide what is in the iframe or in other words, explicitely make it totally unaccessible.

IF your fear is that contents out of your control could break the accessibility of your page, then

Administratively speaking, certifications based on WCAG complience know this problem and usually accept exceptions, ie don't take into account something you haven't control in.

Pratically speaking as a screen reader user, the badly accessible iframe will probably indeed give the impression that the whole accessibility of your site is bad in general, but it's still certainly better to have some partially accessible content rather than nothing at all. You'd better remove the aria-hidden=true. Even if you know that it isn't very accessible, leave a chance to access a little of it no matter what, instead of blocking it definitely. Perhaps the accessibility of the content will improve over time.

The exception to this is if the content of the iframe is objectionnable, decorative, or doesn't bring any real information in the context of your page. Typical examples include ads and various kinds of widgets (weather, clock, social network share, etc.) For those, go ahead, leave the aria-hidden=true and remove all focusable elements of the iframe. They are anyway just useless noise, without any regret if they are completely skipped.