Can we make VoiceOver skip the contents of a container, sometimes?

Question

In one of our native iPad apps, there's a screen divided into a number of sections. For the most part, I think it works well with VoiceOver. But one of those sections is a UIWebView that displays web content related to the app, but provided by another vendor. It's essentially a black box to us. So I have no control over what that content is (or how accessible it is), it's incredibly dense with little nuggets of content, and it's on the left side of the screen, so it comes before a lot of the other content in (English) reading order.

As a consequence, if I ask VoiceOver to read through the contents of the screen, it quickly gets bogged down in this web content, and I can't imagine many people sticking it out to the remainder of the screen. But making them give up and scrub the screen to discover things seems obnoxious.

What I would love to be able to do would be to have the read-through treat that whole region as a single unit and use a summary label or heading, but still allow the user to point into it or toggle it somehow to allow interaction with the web content. Is there any way to accomplish this on iOS (without completely confusing the accessibility system)?

Of course, I'm sighted, so I'm also acting on speculation to some extent. Would the current UI be as confusing to users relying on VoiceOver as I think? Is what I'm describing as my solution going to be an even worse situation?

Answer 1

• aria-hidden="true" would make a screen reader ignore the whole content (if this screen reader is modern enough to take into account WAI-ARIA. VoiceOver is).
  That isn't what you're trying to achieve I guess, and most of the time it isn't desirable: why would screen reader users not able to read the same content as others, who are you to decide for them what they can/can't read that other people can't/can? Except in known cases of complete inaccessibility like a keyboard trap and this keyboard trap can't be fixed for now

• a skip link before this content would allow SR users to jump to the content that is after this section.

• if relevant, known ARIA landmark roles would allow to choose which part of the page they want to read (it would need this section to be the whole sidebar - complementary role - or the main one. Probably not the case)

• SR can navigate through headings (as well as links and sequential reading and now landmark roles).
  If this section and the next one begin with good headings, then it can be bypassed quickly.
  Relevant WCAG 2.0 Techniques:

  • Providing heading elements at the beginning of each section of content (H69)
  • Providing descriptive headings (G130)
  • Using h1-h6 to identify headings (H42)
  • Organizing a page using headings (G141)
     

• If there's no heading element and it can't be modified, but there's some text that could've been a relevant heading except it's a paragraph or item list or whatever, it could be marked as an equivalent with ARIA by using role="heading" and aria-level="N" (see role="heading")

• if you've a good reason to modify the natural reading order of columns (I think this is the case here), you can modify layout with floats and flexible box layout (IE10+) (latter has had 3 different syntax throught the years, plugins like autoprefixer are welcome, or SASS/Compass...). Your left column would then appear last when tabbing but that requires modifying the layout of maybe a lot of templates.

aria-describedBy can probably be useful in some way but I've not enough knowledge about its uses, maybe somebody else will know more about it.

Answer 2

From comments Sixteen said:

Unfortunately, like I said, I don't have any control over that content at all. It comes from elsewhere, and is being displayed by our app

I agree with Felipe. I don't know what your code looks like, but say this in basic HTML. You probably either embed the code with an iframe, or inject the content into your code (example PHP include()).

Regardless on the method you use, you probably wrap a <div> around it. So you could do

<div aria-hidden="true">
 //iframe/inject here
</div>

to make it not be seen by AT. Taking this basic model, we could pull out aria-hidden="true" and replace with role="complementary". You could put text in the div, push it off screen and say a nice line, and same for aria-described by, but you may want to tack on tabindex to it. Ex:

<div aria-describedby="ex" tabindex="-1">
 <p id="ex" class="offscreen">Below is useless jargon by blah blah blah. It may 
   be more beneficial to <a href="#something">jump to the main section</a> instead.</p>
 //iframe/inject here
</div>