让您 app 中的图表可供残障人士无障碍访问

让您 app 中的图表可供残障人士无障碍访问

图表是理解数据的重要工具，对于理解我们自己、我们的健康情况、我们的财务状况和我们身处的世界都至关重要。了解如何通过音频图形和声音数据，帮助视障人士访问您 app 中的图表。我们将向您展示如何通过通用设计原则和系统辅助功能设置来让图表更易于访问。

资源
相关视频

WWDC21
- SwiftUI 辅助功能：超越基础功能
下载

♪播放重低音音乐♪ ♪ 嗨我是普雷斯顿今天我要谈的是如何让app的图表变得更容易使用我们先来看看今天会提到的内容首先我们会先谈到一些让你的图表更易于使用的好处再来是一些原则当你在决定图表的视觉方面时接下来我们会讨论如何让你的图表使用旁白变成可感知滑动的图表最后我们会谈到一个新功能叫做“语音图表” 以及如何让你的app支持它那我们开始吧数据在现代生活非常重要我们每天都在使用数据在金融健康、目标还有好多其他东西的决策上但为了使用数据我们必须要了解它图表非常有用因为它们让我们能快速了解数据显示了什么而不需要太繁琐的细节但图表并不是无障碍的盲人或弱视的人看不到如果看不见视觉的图表它就没价值了无障碍团队研究了好多年为了让盲人和弱视民众也能接触数据今年你能让你的图表也适用在盲人和弱视民众身上那就是让你的app支持语音图表我们来看看范例这是一个范例app 显示历年出生率从1917年到1975年但你看这个图表你可以马上看到一些有趣的现象你可以看到出生率降到了低点在1935年左右然后在差不多1960年时快速增加之后又下降我们能让盲人或弱视民众同样拥有快速了解数据的能力使用新的语音图表“旁白”功能我来示范给你看首先我要先找到语音图表的选单它在旁白的齿轮里语音图表之后往下滑直到听见“图表细节” 播放语音图表图表细节然后双击打开语音图表的探索画面语音图表前往然后我会慢慢摸索到播放键播放语音图表它就会播放这份数据的一段连续音 20世纪出生率播放语音图表按键我们来听听看播放完毕是不是很令人兴奋？你刚刚听到的跟你看到的是同一份图表以听觉的方式呈现而不是视觉你听到的音高对应到历年的出生率低音代表低数值高音代表高数值这些音高完全对照了视觉图表上的线就算看不到图表语音图表也能让你知道重要的信息只要花短短几秒的时间现在我们对这个数据有了大致的了解我们来看更精确的信息看我们有兴趣的信息下一个我们想知道的可能是出生率最高是大概多高并在哪一年发生的想这样做的话语音图表有提供互动模式让旁白用户可以双击屏幕后按住再拖曳以拖曳的速度聆听数据如果他们停下来旁白就会读出数值对应到用户手指的位置在语音图表里我们来使用互动模式试着找到最高的出生率及年份 20世纪出生率数据点 1960年每一万人有268人出生通过在语音图表上滑动直到听到最高的声音然后暂停去听数值就能知道最高的出生率是在1960年每一万人中就有268个新生儿由于我们知道最高出生率发生在1960年附近我们可能能够推断这个高峰对应到婴儿潮时代我们能得到这些信息单单从声音化的图表里我们现在来看一个不同的图表这是一个散布图 X轴是车辆重量 Y轴是燃油效率来自不同种类的汽车在这个图表的语音图表里你听到的每个声音都各代表一个数据点代表一辆车就像视觉图表的每个视觉数据点每个声音的音高都代表车辆每加仑英里数的燃油效率所以高的音频代表高燃油效率的车辆想想看你觉得会听到什么在我播放语音图表后我来听听试着去听数据是攀升还是下降播放完毕希望你有听出是下降这代表越大台的汽车燃油效率通常比较低在这组数据中想象一下我们需要花多长的时间才能了解这之间的关系如果我们只有原始数据点的话我们就必须要一个一个看如果你仔细听的话你可能会听到一个很高音的离群值在这组数据里它在语音图表里很突出就像在视觉图表里一样它是这组数据里唯一的油电混合车如果你想得到关于离群值更多的信息你可以使用互动模式在数据间滑动直到听到最高音然后暂停听取数值就像我们在出生率图表做的那样除了语音图表这个探索画面也提供了摘要信息关于数据中重要的信息像是形状、趋势和离群值是由这组图表数据的自动数据分析推断的连同语音图表旁白也能读出摘要信息来完成数据理解我们快速回顾一下无障碍图表的优点让你的图表更加无障碍能让你数据丰富的app 触及到更广的群众包含盲人和弱视民众它能造福用户通过使用有帮助的工具了解图表数据这能帮助他们好好利用数据的力量无论是在生活或职场上最后加上今年要推出的新API 制作图表比以往简单更多了我很开心能够示范给你如何让你的app支持语音图表但我们必须先提到一些基本的无障碍图表主题从如何让你的图表在视觉上更清楚开始你可以做一些简单的事就让你的视觉图表更浅显易懂以这个图表为例这是个简单的折线图显示每月的平均降雨量在热带和干旱地区我们来套用一些无障碍原则来改善这图表的视觉亲合力首先使用高对比度的颜色很重要如果可以的话使用高对比度的前景和背景颜色能让你的图表容易观看和理解特别是对于弱视的人你可以看到线条的颜色跟背景的颜色对比度很低标题和标签文字也都有点暗我们来更新这些颜色让它们跟背景对比高一点好多了你可以看看颜色间的对比率去决定这个对比是否足够 Xcode自带的“无障碍检查器” 有颜色对比计算器供你使用最好让对比率高于4.5比1 下一步能做的是来改善你的图表的无障碍功能就是避免有问题的颜色组合通常有一个好方法就是尽可能避免红绿组合红绿色盲是最常见的一种色盲同时使用这两个颜色会让你的图表对有些人来说难以理解回到折线图绿线代表热带地区的降雨红线代表干旱地区的降雨你可以知道哪个数据是哪条线通过使用小图示但如果你有绿色盲一种红绿色盲的形式这个图表可能看起来会像是这样你很难知道哪条线是热带地区的降雨哪条线是干旱地区的降雨我们把红色的线改成蓝色这看起来可能变化不大但对于红绿色盲的人来说图表看起来会像这样做一点小调整就能让红绿色盲的人看出两条之间的差别还要避免同时使用蓝色跟黄色因为这组颜色的色盲是第二常见的这些都是很好的改良我们再更进一步用符号代替颜色来区分数据使用数据符号能让大家了解你的图表且不需要依靠颜色回到图表我们来加一些符号到数据上你可以看到热带的数据现在有圆点干旱数据有方点你现在可以辨识数据单从符号来看这代表就算有人分辨不出颜色也能了解你的图表如果一开始就这样做的话是最好但有时候基于设计或是产品限制你可能选择的颜色有限或符号有限这样的情况下你还是能通过支持一些简单的无障碍设定来提供无障碍的体验即使你的图表默认中不能使用符号你也可以提供无障碍体验通过开启设定当使用颜色区分时加入符号如果基于产品的关系不能随意更改颜色设定可以考虑使用高对比度颜色当对比增强的设定启用时降低透明度也能让你的图表视觉上更友好如果你的图表使用透明效果可以考虑关闭他们当降低透明度的设定开启时如果你是在开发macOS 而不是iOS的app 你也可以在macOS 支持这些设定你可以在这部影片的相关资料里找到这些API的开发者文档现在我们来看如何让你的app 变成可滑动的通过旁白我喜欢喝咖啡也喜欢编程我们来假设一下它们之间有关连一排是喝咖啡的量一排是写的代码量做成图表假设而已另外这数据显示到12杯咖啡但别担心没有工程师在制作数据的时候受到伤害这都是假的我们来看如何让这数据变成可滑动的给旁白用户使用这是一段图表检视类别的范例代码它跟模型对象相对应图表检视应该有一个模型的参考还有自动绘图的功能模型可能会有图表的标题跟数据点在一个简单的结构里首先要做的是把你的图表变成容器这会帮助旁白正确地集合你图表的元素帮助滑动要把你的图表变成容器只要覆写无障碍容器类型在图表检视上然后回传语意群组容器类型这对于旁白的滑动还有找出属于图表的元素来说很重要下一步我们要给图表的无障碍标签这会告诉旁白关于你的图表要讲的内容通常这应该是你图表的标题或相似内容以供旁白阅读让你在用户界面可以辨识出你的图表最后你需要为每个数据点提供无障碍元素你可以提供这些元素通过覆写图表检视的无障碍元素属性这会在你的图表里创建元素让旁白可以滑动用户就能获得每个数据点的信息要这样做的话你可以使用地图从你的数据点列表建立你的无障碍元素陈列每个数据点我们都会建立一个新的 UI无障碍元素对象指定图表检视做为它的无障碍容器然后我们提供一个数据点的字符串呈现给元素的无障碍数值属性这个字符串就是旁白会阅读的内容当你滑动到这些数据点上时在你的代码中你可能会想要本地化字符串你可能会想使用字符串字典来决定适当的多元化规则在这个范例中我们还是先保持简单就好最后我们需要提供无障碍框架给我们的元素好让旁白知道它在屏幕的位置你可能在其他地方有计算每个数据点框架的逻辑因为你需要这个来绘制视觉图表如果你手上有的话你可以用在这里你现在可以回传你已经完成的数据点无障碍元素好我们来看看目前完成了什么咖啡杯数对上代码条数零杯 20条代码一杯 30条代码两杯 35条代码三杯 32条代码太好了像你听到的旁白读出了标题当它聚焦在图表元素时因为我们把图表变成语意群组然后给它无障碍标签我们也让每个数据点可以被滑动通过创建UI无障碍元素去代表每个数据点还有一件事有时候你可能有数百个或数千个数据点这种情况下你不会想要为每个数据点制作无障碍元素因为这样会有太多要滑动我们建议把你的图表合理的间隔开来再为每个区间制作元素而不是针对每个数据点这会提供更好的滑动体验还能带来更好的表现同时又便于理解还没结束哦我们还能做更多让数据可滑动很重要但我们还是在呈现原始数据给旁白用户一次一个点图表的价值在于告诉我们数据真正显示了什么帮助我们看得比单一数据点更远这就是语音图表能做的现在终于到了我们来谈谈如何让你的app支持语音图表想象我们有一个图表模型结构里面包含我们用来定义特定图表所需的信息在你的代码中你可能有一个模型对象看起来像这样如果没有别担心这个概念还是能套用在你的代码上不管它是什么样在这个例子上一个图表会有标题跟大纲一个X轴一个Y轴每个轴都有小标题跟数值范围代表轴上呈现的最高和最低的数值最后还有数据点的陈列包含图表真正的数据我们会使用这个范例模型对象的信息去开启我们图表的语音图表首先导入无障碍框架然后展开图表检视类别遵守AXChart协议遵守AXChart协议很简单因为只需要支持一个属性你只需要实施无障碍图表描述符你建造的图表描述符对象会包含旁白所需的所有信息去提供语音图表体验我们来看如何建造图表描述符一步一步来首先我们需要为每个轴创建一个轴描述符对象每个轴描述符会提供信息给旁白关于它是呈现分类还是数字数据与否呈现的数值范围网格线的位置还有如何安排可读数值由于X轴在咖啡图表里是数字我们就创建一个数字轴描述符如果X轴是分类数据我们就使用分类轴描述符我们会提供标题跟数值范围通过使用模型对象我们也可以选择性地提供轴上的网格线位置如果有的话当你提供了网格线他们会在语音图表里以触觉回馈呈现在播放和互动时我们先让它空白因为我们的X轴没有网格线以数字轴来说我们也需要创建一个数值描述符提供者闭包这个闭包很重要因为它会告诉旁白如何读出轴上的数值所以它会说“五杯” 而不是只有“五” 在这轴上我们要安排描述在数值后读出“杯” 一样在你的代码里你可能会想本地化字符串套用适当的多元化规则但我们还是让这范例保持简单我们要做一样的事情创建Y轴的轴描述符只是我们要把数值描述安排成读出“条代码”而不是“杯” 现在我们的图表有基本的结构了我们来加上数据你要为每个数据列加入数据列描述符这图表中只有一个数据列所以创建一个数据列描述符就好输入数据列名称它是否有连续性还有真实的数据点你可以在连续性这边输入“否” 当数据列的视觉呈现是使用离散标记像点或长条时你要输入“是” 当你的数据列的视觉呈现是线条时以我们的数据列来说我们需要提供AXDataPoint对象陈列最简单的方法就是标示他们从图表模型的数据中标示快完成了只剩最后一步就是全部合在一起建立出AXChartDescriptor对象我们给个标题一样要跟图表的标题一样如果有的话可以提供一个大纲给我们的图表这就像是在为图表提供替代文字你应该用这个属性去传达数据最重要的信息用一两句话就好这个大纲文字会呈现给用户在语音图表的探索画面这可以大大的帮助旁白用户理解你的图表最后我们会提供刚刚创建好的轴和数据描述符来完成图表描述符然后回传好了来看看最终成果语音图表播放语音图表数据细节语音图表前往咖啡杯数对上代码条数播放语音图表按键播放完毕回顾重点记得要为你图表视觉设计加上无障碍功能选择这包含使用良好的对比率除了颜色外使用符号来区分数据类别避免使用有问题的颜色搭配为了色盲用户记得要在无障碍功能树公开数据元素让旁白用户可以感知并滑动最后实施AXChart协定还有无障碍图表描述符在图表检视上让旁白用户可以获得跟视觉用户一样的图表数值现在你知道了所有信息可以去创建丰富、无障碍的图表了我们希望你能使用这些工具来更好地帮助用户因为数据在现代生活真的很重要图表是最好的工具之一用来在充满数据的世界里了解数据现在你能把这好处带给所有人了 ♪

class ChartView: UIView {
    let model: ChartModel

    func drawChart() {
        // ...
    }
}

struct ChartModel {
    let title: String
    let dataPoints: [DataPoint]
        
    struct DataPoint {
        let name: String
        let x: Double
        let y: Double
    }
}

10:48 - ChartView

extension ChartView {
    public override var accessibilityContainerType: UIAccessibilityContainerType { … }
    public override var accessibilityLabel: String? { … }

    public override var accessibilityElements: [Any]? {
        get {
            return model.dataPoints.map { point in
                let axElement = UIAccessibilityElement(accessibilityContainer: self)
                axElement.accessibilityValue = "\(point.x) cups, \(point.y) lines of code"
                axElement.accessibilityFrameInContainerSpace = frameRect(for: point)
                return axElement
            }
        }
        set {}
    }
  
 private func frameRect(for dataPoint: DataPoint) -> CGRect {

14:23 - Basic chart definition example

struct ChartModel {
    let title: String
    let summary: String
    let xAxis: Axis
    let yAxis: Axis
    let data: [DataPoint]

    struct Axis {
        let title: String
        let range: ClosedRange<Double>
    }
    
    struct DataPoint {
        let name: String
        let x: Double
        let y: Double
    }
}

15:08 - Enabling Audio Graphs

import Accessibility

extension ChartView: AXChart {

public var accessibilityChartDescriptor: AXChartDescriptor? {
    get {
    }
    set {}
    }
}

15:35 - Chart Descriptor- Basic

public var accessibilityChartDescriptor: AXChartDescriptor? {
    get {
        let xAxis = AXNumericDataAxisDescriptor( … ) 
        let yAxis = AXNumericDataAxisDescriptor(title: model.yAxis.title,
                                                range: model.yAxis.range,
                                                gridlinePositions:[],
                                                valueDescriptionProvider: { value in
            return "\(value) lines of code"
        })
    }
    set {}
}

16:55 - Chart Descriptor- Continued

public var accessibilityChartDescriptor: AXChartDescriptor? {
    get {
        let xAxis = AXNumericDataAxisDescriptor( … )
        let yAxis = AXNumericDataAxisDescriptor( … )
        let series = AXDataSeriesDescriptor( … )
        return AXChartDescriptor(title: model.title,
                                 summary: model.summary,
                                 xAxis: xAxis,
                                 yAxis: yAxis,
                                 additionalAxes: [],
                                 series: [series])
    }
    set {}
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC21