SwiftUI：带VoiceOver无障碍的列表自动滚动异常问题排查

问题场景 #

基于List、ScrollView和ScrollViewReader实现的自定义选择器，关闭VoiceOver时proxy.scrollTo功能正常；但开启VoiceOver后，当选中项位于列表第三屏及以上时，执行scrollTo后会自动回滚至视图顶部，前两屏则无异常。

问题原因 #

1. VoiceOver会接管长列表的滚动与焦点管理，手动调用scrollTo的时机与VoiceOver的自动滚动逻辑冲突
2. onAppear中异步设置accessibilityFocus的操作，会干扰VoiceOver对滚动位置的判定
3. List嵌套ScrollView的结构，导致滚动层级冲突，VoiceOver优先处理List的滚动逻辑

解决方案 #

• 将ScrollViewReader移至List外层，直接作用于List而非内部的ScrollView，避免滚动层级冲突
• 调整accessibilityFocus的设置时机，与scrollTo操作同步执行，避免异步时序问题
• 延迟scrollTo的触发时间，确保VoiceOver初始化完成后再执行滚动操作
• 为List添加明确的无障碍标识，帮助VoiceOver识别列表结构

修改后的代码示例 #

@AccessibilityFocusState private var accessFocus: String?
@State private var scrollToValue: String = ""

ScrollViewReader { proxy in
    List {
        Section {
            ForEach(myArray, id: \.self) { value in
                HStack {
                    Text(value)
                }
                .id(value)
            }
        }
    }
    .listStyle(PlainListStyle())
    .accessibilityLabel("选项列表")
    .onAppear {
        // 延迟执行，确保VoiceOver完成初始化
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
            scrollToValue = viewModel.myValue
        }
    }
    .onChange(of: scrollToValue) { targetValue in
        withAnimation(.smooth) {
            proxy.scrollTo(targetValue, anchor: .top)
            // 同步设置无障碍焦点
            accessFocus = targetValue
        }
    }
}

额外优化建议 #

• 避免使用.spring()动画，改用.smooth()或无动画，减少与VoiceOver滚动逻辑的冲突
• 若列表项数量极大，可考虑使用LazyVStack替代List，更灵活控制滚动与焦点
• 测试时开启VoiceOver的“屏幕 curtain”功能，模拟真实视障用户的操作场景

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