iOS VoiceOver滚动，内部div，3个手指向上/向下滑动

Question

I am doing some VoiceOver experimentation with scrolling (the three-finger swipe up/down gesture).

My test page is at:

http://107.170.41.208/AccessibleHTML

There is a div with a scrollbar and lots of content (red background), and after that another div that is not scrollable with a lot of content (yellow background).

With the mouse I can scroll through the red background content, but using VoiceOver it skips that section.

How can I scroll through the red section content with VoiceOver?

Answer 1

A little late to the party but hopefully it's still useful to people.

Using position: absolute can sometimes cause some issues for screen readers as the DOM layout might not match the visual order. The VoiceOver can sometimes take the decision that it wouldn't make sense to read that first (or at all).

In that specific case you could just set the required height on the "red" <div> with overflow:scroll and it would be fine and should be readable and scroll-able.

As a more general rule, try and keep the visual order consistent with the DOM order, using float sparingly to change the layout slightly.

There obviously are rules somewhere dictating how and why this happens but they are tied up in Apple's code and very changeable between releases.