案例：可访问的财务报表图表

概述

本案例将指导您创建一个符合可访问性标准的财务报表图表，重点解决视觉障碍用户的需求。我们将结合VoiceOver支持、动态字体适配和高对比度颜色方案，确保所有用户都能理解财务数据。

实现步骤

1. 基础柱状图搭建

struct FinancialBarChart: View {
    @ObservedObject var financialData: FinancialDataModel
    
    var body: some View {
        Chart {
            ForEach(financialData.quarterlyResults) { quarter in
                BarMark(
                    x: .value("Quarter", quarter.name),
                    y: .value("Revenue", quarter.revenue)
                )
                .accessibilityLabel("\(quarter.name) revenue")
                .accessibilityValue("\(quarter.revenue) million")
            }
        }
        .chartXAxis {
            AxisMarks(values: .automatic) { value in
                AxisValueLabel()
                    .accessibilityHidden(true) // 避免VoiceOver重复读取
            }
        }
    }
}

2. 添加可访问性支持

// 在视图修饰符中添加
.accessibilityElement(children: .combine)
.accessibilityChartDescriptor(self) // 自定义图表描述

// 实现AXChartDescriptorRepresentable协议
extension FinancialBarChart: AXChartDescriptorRepresentable {
    func makeChartDescriptor() -> AXChartDescriptor {
        // 创建详细的语音描述
        let descriptor = AXChartDescriptor(
            title: "Quarterly Financial Report",
            summary: "Revenue by quarter for fiscal year 2023",
            xAxis: AXNumericDataAxisDescriptor(
                title: "Quarter",
                range: 1...4,
                gridlinePositions: []
            ) { "Q\($0)" },
            yAxis: AXNumericDataAxisDescriptor(
                title: "Revenue (in millions)",
                range: 0...financialData.maxRevenue * 1.1,
                gridlinePositions: []
            ) { "\($0) million" },
            series: [
                AXDataSeriesDescriptor(
                    name: "Revenue",
                    isContinuous: false,
                    dataPoints: financialData.quarterlyResults.map {
                        AXDataPoint(x: Double($0.id), y: $0.revenue, label: $0.name)
                    }
                )
            ]
        )
        return descriptor
    }
}

3. 动态字体和颜色适配

.chartForegroundStyleScale(
    range: Gradient(colors: [.blue, .purple])
)
.dynamicTypeSize(...DynamicTypeSize.accessibility3) // 限制最大字体尺寸
.background(
    Color(.systemBackground)
        .contrast(1.2) // 增强背景对比度
)

4. 高对比度模式支持

@Environment(\.colorSchemeContrast) private var contrast

var chartColors: [Color] {
    contrast == .increased ? 
    [.blue, .cyan] : // 高对比度配色
    [.blue, .purple] // 常规配色
}

关键可访问性功能

  1. VoiceOver支持：

    • 为每个数据点提供清晰的语音描述
    • 实现AXChartDescriptor提供完整图表上下文
    • 避免冗余的语音提示

  2. 动态类型适配：

    • 确保图表在不同字体大小下保持可用性
    • 关键标签自动调整布局

  3. 颜色对比度：

    • 自动检测高对比度模式
    • 为色盲用户提供足够的颜色区分度

  4. 交互提示：

    • 为触摸操作提供触觉反馈
    • 长按显示详细数据提示

测试建议

  1. VoiceOver测试：

    • 关闭视觉，仅依赖语音导航
    • 验证数据描述是否完整准确

  2. 动态字体测试：

    • 在设置中调整字体大小到最大值
    • 检查图表布局是否仍然合理

  3. 颜色测试：

    • 启用灰度模式验证可区分性
    • 测试各种色盲模拟器下的表现

扩展功能

// 添加振动反馈
.gesture(LongPressGesture()
    .onEnded { _ in
        UIImpactFeedbackGenerator(style: .medium).impactOccurred()
    }
)

// 替代文本表示
.alternativeChartView {
    FinancialDataTable(data: financialData) // 为屏幕阅读器提供表格视图
}

总结

通过本案例，您学会了如何创建既美观又具备良好可访问性的财务报表图表。关键点包括：

  • 完整的VoiceOver集成
  • 动态布局适配
  • 颜色对比度考量
  • 多模式数据呈现方式

这种实现方式不仅符合WCAG标准，也能显著提升所有用户的数据理解体验。

Last Updated::