iOS无障碍编程需求：点击父视图读全部，点击子按钮仅读自身

问题的核心是原代码中父视图的accessibilityElement(children: .combine)将所有子视图（包括按钮）合并成了单一无障碍元素，导致点击按钮时VoiceOver会读取整个父视图内容。要实现需求，需将按钮从合并的无障碍元素中剥离，让它成为独立可访问元素，同时保留topView和bottomView的合并朗读功能。

修改步骤 #

• 拆分合并容器：将topView和bottomView包裹在单独容器中，只为这个容器添加accessibilityElement(children: .combine)，仅合并这两个子视图的无障碍内容。
• 独立按钮无障碍：让按钮保持独立的无障碍设置，不受父容器合并规则影响。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            // 仅合并topView和bottomView的无障碍内容
            VStack(alignment: .leading, spacing: 10) {
                topView
                bottomView
            }
            .accessibilityElement(children: .combine)
            
            // 按钮作为独立无障碍元素，点击仅朗读自身标签
            Button("Show details") {              
                print("Tapped show detail")
            }
            .accessibilityLabel(Text("This is show detail"))
        }
        .padding()
        // 可选：确保父视图整个区域（除按钮外）可触发合并朗读
        .background(Color.clear)
        .contentShape(Rectangle())
    }
    
    @ViewBuilder
    private var topView: some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("First Text")
            Text("Second Text")
        }
    }
    
    @ViewBuilder
    private var bottomView: some View {
        VStack(alignment: .leading, spacing: 5) {
            Text("Third Text")
            Text("Fourth Text")
        }
    }
}

效果说明 #

• 点击topView或bottomView所在区域时，VoiceOver会依次朗读"First Text, Second Text, Third Text, Fourth Text"；
• 点击按钮时，仅朗读按钮的无障碍标签"This is show detail"，完全符合需求。

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