如何让VoiceOver按从上到下顺序读取SwiftUI横向滚动视图内容

你的问题核心是水平HStack的默认VoiceOver遍历逻辑是按横向布局顺序读取（先读每个VStack的第一个元素，再第二个），而你需要按纵向读完单个VStack所有元素后再切换到下一个。以下是几种可行的解决方案：

方案一：使用accessibilitySection（iOS 15+ 推荐） #

accessibilitySection会将标记的视图视为独立的访问区域，VoiceOver会优先遍历完当前区域内的所有元素，再进入下一个区域。代码修改如下：

ScrollView(.horizontal) {
    HStack {
        VStack {
            Text("A")
            Text("B")
            Button(action: {}, label: { Text("C") })
        }
        .accessibilitySection()
        
        VStack {
            Text("D")
            Text("E")
            Button(action: {}, label: { Text("F") })
        }
        .accessibilitySection()
    }
}

方案二：使用accessibilityElement(children: .contain)（兼容iOS 14及以下） #

与你之前尝试的.combine不同，.contain会保留子视图的所有可访问性特征（比如按钮的文本标签），同时将父视图作为容器，让VoiceOver先遍历容器内的所有子元素：

ScrollView(.horizontal) {
    HStack {
        VStack {
            Text("A")
            Text("B")
            Button(action: {}, label: { Text("C") })
        }
        .accessibilityElement(children: .contain)
        
        VStack {
            Text("D")
            Text("E")
            Button(action: {}, label: { Text("F") })
        }
        .accessibilityElement(children: .contain)
    }
}

方案三：手动指定访问顺序（精细控制场景） #

通过accessibilityOrder给每个元素设置顺序值，VoiceOver会按值从小到大依次读取：

ScrollView(.horizontal) {
    HStack {
        VStack {
            Text("A")
                .accessibilityOrder(1)
            Text("B")
                .accessibilityOrder(2)
            Button(action: {}, label: { Text("C") })
                .accessibilityOrder(3)
        }
        
        VStack {
            Text("D")
                .accessibilityOrder(4)
            Text("E")
                .accessibilityOrder(5)
            Button(action: {}, label: { Text("F") })
                .accessibilityOrder(6)
        }
    }
}

内容的提问来源于stack exchange，提问作者Daniel T.