iOS VoiceOver 滚动、内部 div、3 指向上/向下滑动

Question

我正在做一些 VoiceOver 滚动实验（三指向上/向下滑动手势）。

我的测试页面在：

http://107.170.41.208/AccessibleHTML

有一个带有滚动条和大量内容（红色背景）的 div，然后是另一个不可滚动的带有大量内容（黄色背景）的 div。

使用鼠标我可以滚动浏览红色背景内容，但使用 VoiceOver 会跳过该部分。

如何使用 VoiceOver 滚动浏览红色部分的内容？

Answer 1

聚会有点晚了，但希望它对人们仍然有用。

使用position: absolute 有时会导致屏幕阅读器出现一些问题，因为 DOM 布局可能与视觉顺序不匹配。 VoiceOver 有时会决定先读（或根本读）没有意义。

在这种特定情况下，您可以使用overflow:scroll 在“红色”<div> 上设置所需的高度，这样就可以了，并且应该是可读和可滚动的。

作为更一般的规则，尽量保持视觉顺序与 DOM 顺序一致，谨慎使用float 以稍微改变布局。

显然在某处有规定如何以及为什么会发生这种情况的规则，但它们与 Apple 的代码捆绑在一起，并且在不同版本之间非常可变。