Scrolling iOS VoiceOver, inner div, scrolling 3 fingers up / down

Question

I am doing a few VoiceOver scrolling experiments (three fingers up / down).

My test page:

http://107.170.41.208/AccessibleHTML 

There is a div with a scroll bar and lots of content (red background), and after that there is another div that doesn't scroll with lots of content (yellow background).

I can scroll through the contents of the red background with the mouse, but using VoiceOver, it skips this section.

How to scroll the contents of a red section using VoiceOver?

Answer 1

A bit late to the party, but hopefully it is still useful to people.

Using position: absolute can sometimes cause some problems to read from the screen, as the DOM layout may not match the visual order. VoiceOver can sometimes decide that it makes no sense to read it first (or at all).

In this particular case, you can simply set the desired height to a red <div> using overflow:scroll , and everything will be fine and should be readable and scrollable.

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

There are obviously rules, it is dictated somewhere how and why this happens, but they are related in the Apple code and change a lot between versions.