SwiftUI LazyVGrid：如何修复VoiceOver朗读顺序错乱问题？

这不是你的操作错误，这是SwiftUI中LazyVGrid与Section结合使用时的无障碍访问（VoiceOver）顺序bug：

• 实际表现：VoiceOver会先遍历读取所有分区标题，再开始读取第一个分区内的项目
• 预期表现：应该按照视觉布局顺序，读取一个分区标题后，立即读取该分区内的所有项目，再切换到下一个分区的标题和项目

除了向苹果提交Bug报告，你可以通过以下几种方法调整VoiceOver的读取顺序：

1. 手动绑定无障碍容器与访问顺序 #

将每个原Section拆分为独立的容器，通过accessibilityElement(children: .contain)和accessibilityOrder强制指定元素的访问顺序，让每个分区的标题和项目作为一个整体被读取：

struct ContentView: View {
    let columns = [GridItem(.adaptive(minimum: 80))]
    let collections = (1...3).map { "Collection \($0)" }
    let items = (1...10).map { "Item \($0)" }
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 16) {
            ForEach(collections) { collection in
                // 用VStack包裹每个分区的标题和项目，作为独立无障碍单元
                VStack(spacing: 16) {
                    let header = Text(collection).font(.title)
                    header
                    
                    LazyVGrid(columns: columns, spacing: 16) {
                        ForEach(items) { item in
                            Text(item)
                                .id(collection + item)
                        }
                    }
                }
                .accessibilityElement(children: .contain)
                .accessibilityOrder([header, LazyVGrid(columns: columns, spacing: 16) {
                    ForEach(items) { item in
                        Text(item)
                            .id(collection + item)
                    }
                }])
            }
        }
    }
}

extension String: Identifiable {
    public var id: String { self }
}

这种方法保留了LazyVGrid的惰性加载特性，同时修正了VoiceOver的读取顺序。

2. 替换为非惰性的VGrid #

如果你的数据量不大，不需要惰性加载，可以直接用VGrid替代LazyVGrid，常规VGrid与Section结合时的无障碍顺序通常符合预期：

struct ContentView: View {
    let columns = [GridItem(.adaptive(minimum: 80))]
    let collections = (1...3).map { "Collection \($0)" }
    let items = (1...10).map { "Item \($0)" }
    
    var body: some View {
        VGrid(columns: columns, spacing: 16) {
            ForEach(collections) { collection in
                Section(header: Text(collection).font(.title)) {
                    ForEach(items) { item in
                        Text(item)
                            .id(collection + item)
                    }
                }
            }
        }
    }
}

extension String: Identifiable {
    public var id: String { self }
}

注意：如果列表项数量较多，这种方法会一次性加载所有视图，可能影响页面性能。

3. 自定义无障碍标签优化体验 #

如果暂时无法调整读取顺序，可以给每个项目添加关联分区的无障碍标签，让用户明确知道项目所属分区，缓解顺序错误的影响：

struct ContentView: View {
    let columns = [GridItem(.adaptive(minimum: 80))]
    let collections = (1...3).map { "Collection \($0)" }
    let items = (1...10).map { "Item \($0)" }
    
    var body: some View {
        LazyVGrid(columns: columns, spacing: 16) {
            ForEach(collections) { collection in
                Section(header: Text(collection).font(.title)) {
                    ForEach(items) { item in
                        Text(item)
                            .id(collection + item)
                            .accessibilityLabel("\(collection) 中的 \(item)")
                    }
                }
            }
        }
    }
}

extension String: Identifiable {
    public var id: String { self }
}

优先推荐第一种手动绑定无障碍顺序的方案，平衡性能和无障碍体验。同时务必向苹果提交Bug报告，推动官方修复这个底层问题。

内容的提问来源于stack exchange，提问作者NicolasBrunner