创建 watchOS 的无障碍体验

创建 watchOS 的无障碍体验

了解如何在支持较大文本尺寸、旁白和 AssistiveTouch 等功能的同时为 watchOS 打造一流的辅助功能体验。我们将展示专为 watchOS 构建的 SwiftUI app 添加视觉和运动辅助功能支持，包括有关 API 集成、体验等的最佳实践。

资源
相关视频

WWDC21
- SwiftUI 辅助功能：超越基础功能
- WWDC21 的周二
WWDC20
- 让你的app拥有视力辅助功能
WWDC19
- SwiftUI 中的辅助功能
下载

♪ （在watchOS上创建可访问的体验）大家好我是丹尼尔·赛克斯-特纳我是一名辅助功能工程师在本视频中我和同事维拉塔将介绍 watchOS上的一些辅助功能以及开发者如何打造手表应用程序以便为使用这些功能的人提供支持在今天的视频中我将首先为各位介绍 watchOS上的可访问性然后我将深入讲解辅助功能 API 并向大家展示如何支持不同类型的视觉辅助功能最后维拉塔将向各位介绍运动辅助功能在手表上的工作方式以及您可以做些什么来提供支持让我们先从watchOS 上的辅助功能说起辅助功能是指人们以最适合自己的方式使用他们的设备这意味着想要让您的应用程序获得最佳用户体验就必须对辅助功能加以考量在Apple Watch上我们有大量的辅助功能可以让您的应用程序更易于使用例如 VoiceOver 等辅助技术可以让视障人士充分利用他们的 Apple Watch 他们能够通过一系列手势和点击来导航屏幕同时程序将以语音方式向他们播报内容 watchOS今年推出的全新功能是AssistiveTouch 该功能专为Apple Watch 进行了重新设计 AssistiveTouch 帮助运动障碍患者在完全不必触摸屏幕的情况下使用Apple Watch 维拉塔稍后将向各位展示这是如何工作的以及您可以做些什么来提供支持 watchOS还提供了一些显示调解功能例如Reduce Motion Bold Text 以及今年的新功能辅助功能大字体让我们来看看watchOS 上的视觉辅助功能利用适当的API来支持辅助功能将确保 VoiceOver能够为您的用户正确运行无论您的应用程序是用WatchKit 还是 SwiftUI编写本视频将重点介绍针对 SwiftUI的辅助功能但要知道您在这里学到的所有原则也同样适用于WatchKit 在使您的应用程序具有辅助功能时别忘记表盘小部件和通知表盘小部件和动态通知也需要支持我们的辅助技术因为它们是传递应用程序消息的另一条途径现在学习新知识的最好方法不就是开发应用程序吗？幸运的是我在家种过植物之后觉得为它们花费精力非常值得因此决定进一步开发出一款应用程序来辅助照料它们现在程序还没有开发完成但在主屏幕上我能看到植物的所有信息包括接下来的照料任务安排：五天内浇水七天内施肥保持中等的光照量在这份列表中还有其他几株植物对于每株植物我都有两个按钮用来记录任务例如我浇水或施肥的时间通过点击单元格我可以调整浇水或施肥的间隔天数由于这是一款提供信息的应用程序每个单元格都包含了大量文本在这里我将向大家展示系统字体为默认大小时该应用程序的界面它看起来相当漂亮但如果我将系统字体调整为特别小正如左图所示您将会发现虽然按钮和任务列表文本重新调整了字体大小但植物名称文本的字体大小不变当我将字体调到特别大时如右图所示任务列表字体变得非常大以至于被截断了不再适配显示出屏幕上的所有信息让我们来看看该应用程序如何更好地支持 Dynamic Type 如果我检查我的 PlantView代码会发现我声明了一个包含植物名称以及其他内容的VStack函数请注意标题的字体使用了固定的字体大小这确实能够阻止标题字体大小发生改变我不应该使用固定的字体大小而是应该使用系统提供的 11种文本样式之一左边的文本样式使用了默认的系统文本大小当把字体大小调到最大时就会显示成右边文本字体的大小通过使用文本样式系统将根据系统文本大小设置自动调整字体大小所以如果我再次查看PlantView函数的代码我可以很快很简单地将标题字体更改为字体较小的title3文本样式接下来让我们解决任务列表文本被截断的问题在PlantTaskLabel 函数代码中我将HStack函数中所有内容的lineLimit限制为1 只允许文本单行显示为了让您的用户界面能够根据需要灵活地调整行数请将lineLimit设置为您需要支持的最大行数或者删除lineLimit 允许无限行数现在我们已经取得了进步但是虽然界面字体确实变大了而且不再被截断与此同时界面也变得更加拥挤屏幕上的信息仍然不易于阅读有时对于较大的文本样式我们只需要以不同的方式构建其布局所以在构建布局时我将在sizeCategory中创建一个 Environment属性包装器以便发生变化时随时获得更新接下来我只需要调整用户界面使用户界面依赖于 sizeCategory 在这种情况下任务列表文本开始以 extraExtrallarge包装如果sizeCategory 比它更小我将使用我们之前看到的PlantView 但如果更大我将使用这种垂直布局的植物视图它将我的标签和按钮都堆叠在一起使它们有更大空间可以扩展这样看起来就好多了随着大字体可访问性文本样式在手表上的推出我们期待看到更多人使用Dynamic Type 您也应该这样做！现在人们在设置他们的 Apple Watch时他们一开始就会看到自定义文本大小的选项如果他们不做任何调整手表将自动选择与手机上所用字体最相近的大小概括来讲Dynamic Type 有三个关键要素可以确保手表应用程序优美地显示更大的文本首先需要确保始终使用文本样式而不是固定的字体大小其次允许文本换行以避免被截断第三在必要时如果内容变得过于拥挤可切换到垂直堆叠布局今天关于大文本字体的讲解只是浅尝辄止我强烈建议您观看 “用Dynamic Type 打造应用程序”视频来真正提升您的技巧想要进一步了解如何营造出色的视觉体验请观看 “实现应用程序的视觉可访问性”视频好了，应用程序在视觉上表现出色但如果我患有视觉障碍呢？让我们打开VoiceOver 感受一下它能带来怎样的听觉体验
WWDaisy 雏菊图像水珠图像五天叶子图像七天调高亮度图像中等水滴填充按钮叶子填充按钮好我们确实可以做一些改进首先是减少可进行交互的元素数量目前这个视图相当复杂每个单元格有四个标签四张图像和两个按钮目前如果想要访问第二株植物我必须浏览完第一株植物单元格中的每一项此外浇水、施肥和阳光的图像图标作为文本的单独元素被读出它们的标签在我们的语境中甚至没有意义最后底部的两个按钮使用了所用符号提供的默认标签因此我们谈到的第一个问题是我必须浏览完太多的项才能访问第二株植物当我创建我的 NavigationLink时我将Children的 accessibilityElement分组指定为.contain 只是为了弄明白每个元素的可访问性状态但既然这个看起来不错我将删除这一行而NavigationLink 将自动合并来自children 的所有可访问性信息现在单元格被视为单个元素文本内容被读取为 “WWDaisy 五天七天中等按钮” 任务列表仍然需要一些改进所以接下来我们将为每个任务赋予更好的标签为接下来的植物照料任务提供一些背景信息标签由PlantTask决定在PlantTaskLabel结构中我将修改 accessibilityLabel 使得每个植物任务能够返回不同的字符串在为我的按钮提供标签时我也将采用同样的方法现在内容被读取为 “WWDaisy 五天内浇水七天内施肥保持中等光照按钮” 浇水和施肥按钮将被读取为 “记录浇水按钮” 和“记录施肥按钮” 现在系统已经为我们自动完成了许多工作只需要再加一些修饰符实际上有了SwiftUI 您的大部分可访问性都是免费的您可能只需要编写几行代码但有些时候您可能需要创建一个自定义控件我就创建了一个自定义控件因而我可以调整植物浇水与施肥的频率我们来看一下吧浇水频率天数标题减按钮八加按钮加虽然这在技术上可行但体验上并不理想我们的目标是把这三项变成同一个可访问元素为此我首先使用我们的 accessibilityElement 修饰符这将创建一个新的高级元素但这次我将忽略所有的children 这其实就是 accessibilityElement 的默认行为所以我可以将参数留空以获得相同的行为由于我忽略了children 这将摈弃“加”和“减”按钮标签以及自动提供的可访问性行为区别于上述方法，我将使用 accessibilityAdjustableAction 通过在计算器上向上或向下滑动来允许用户增加或减少天数既然我只有一个元素我将用任务名称为该元素提供唯一一个标签最终输出结果为“浇水频率” 或是“施肥频率” 最后我将赋予它一个值 accessibilityValue 在每次值发生改变时都会被读取而标签只有调用元素时才会被读取
浇水频率天数标题浇水频率八天可调整九天很好这好多了正如您刚才所见 SwiftUI让 VoiceOver可以轻松地访问我们的手表应用程序最棒的是因为这是SwiftUI 同样的代码也可以在 macOS 和iOS上运行如欲进一步了解如何使用SwiftUI 来设计出色的体验请观看 “SwiftUI的可访问性”视频如欲进一步了解有关SwiftUI 可访问性的全新工具和API 请观看 “SwiftUI 可访问性：进阶知识”视频在我们继续讨论视觉可访问性之前我想着重介绍另外两项功能：表盘小部件和通知表盘小部件是应用程序的高流量窗口当然它们也需要以可访问的方式提供信息表盘小部件有许多不同的类型但大多数都包含三个不同的组件：文本图像和符号文本将被VoiceOver 自动选取但如果您的文本中包含缩写词请确认使用非缩写版本添加可访问性标签这里我们将缩写的 “Wednesday Mar 9” 改为非缩写的 “Wednesday, March 9th” 基于图像的表盘小部件也很常见也请为它们提供辅助功能标签否则将使用图像名称 “月亮”的描述性远远比不上 “月亮的实时视图第三季度” SF符号等图像可能拥有默认的辅助功能标签例如“水滴填充” 但请确保符号所带的标签是对您来说最有意义的标签 “三天内浇水”对我来说更有意义至于通知它们是应用程序向用户提供大量信息的另一个途径因此有的通知相当简单直观但动态通知等其他通知可能拥有复杂的视图所以需要与应用程序相同的辅助功能支持现在我们把镜头交给维拉塔她将为各位介绍运动辅助功能维拉塔·尹容妍：好的谢谢达尼尔我是维拉塔·尹容妍我是辅助功能团队的一名工程师今天我很高兴能为大家讲解 Apple Watch上的运动辅助功能支持但在开始讲解之前请允许我简单介绍一下我们的新特性无需触摸屏幕只需要使用手势我就能够从表盘待机界面跳转到控制中心再到“请勿打扰”按钮然后打开勿扰模式就是这么简单今年我们非常高兴将AssistiveTouch 引入Apple Watch AssistiveTouch 让用户无需触摸即可使用Apple Watch的全部功能只需使用戴Apple Watch 的那只手用户可使用手势或手部动作来引导光标在屏幕上移动他们可以打开菜单来访问基于屏幕内容的其他功能对有些人来说这可能是他们与Apple Watch 进行交互的唯一方式对于运动障碍患者例如截肢手部或手臂功能缺失 AssistiveTouch 将为他们带来更多选择让他们能在Apple Watch 上控制和执行操作现在让我们举例说明 AssistiveTouch 的使用方式使用AssistiveTouch 的主要方式是通过手势人们能做出不同的手势例如握拳以进行点击两次握拳以打开操作菜单捏一下手指以导航至下一个元素捏两次则返回至上一个元素对于无法使用手势的人他们可以选择手部动作人们可以通过倾斜手腕来移动屏幕上的指针与用户界面元素进行交互类似于iOS上的 AssistiveTouch 借助Dwell Control 您可以让指针在元素上停留一会儿以此来执行操作
现在让我们来看看 AssistiveTouch是如何工作的 AssistiveTouch 包含两个主要特性：光标和操作菜单打开AssistiveTouch 您将看到一个光标出现在屏幕上这个光标将聚焦于屏幕上的每个元素一次一个按照从左上到右下的顺序光标会突出显示元素以进行进一步的交互要获得关于已聚焦元素的更多操作您可以打开操作菜单执行系统或自定义操作 AssistiveTouch 操作菜单拥有可对设备进行控制的默认系统操作例如按下数码表冠滚动导航手势交互和其他操作您也可以向该菜单添加自定义操作现在我们知道了 AssistiveTouch是如何工作的让我们看看如何在应用程序中支持它我们将讨论以下话题首先我们将了解在您的视图中哪些是可聚焦元素以及我们如何修改它们然后我们将着眼于光标框以及我们如何修改光标框大小最后我们将详细讨论如何自定义操作菜单我们先来谈谈可聚焦元素这张表简要列出了可被AssistiveTouch 聚焦的元素只有响应用户交互的交互元素才是可聚焦的 SwiftUI提供内置的控制元素来处理用户交互这些元素是可交互且可聚焦的如果您的视图中有一个按钮一个切换键或者一个 NavigationLink 这些元素在默认情况下是可聚焦的可操作的元素可被 AssistiveTouch聚焦因为它们有一个动作或者被定义为可交互文本元素只要附加一个点击手势动作就能变得可交互和可聚焦您也能为一个元素添加 accessibilityAction 如果您将一个元素定义为具有可操作的特征比如按钮或者可调整那么它将被视为交互元素并且可被 AssistiveTouch聚焦有些元素是不可聚焦的不响应用户交互的静态元素例如标签或文本不可被 AssistiveTouch聚焦禁用用户交互的元素也是不可聚焦的让我们来看一个例子在本视图中有一个标签标题包含有饮料信息的文本 “接受”和“取消”按钮元素只有两个按钮可聚焦标签和文本是不可聚焦的让我们再来看看该视图的代码点击手势附加于主VStack 表明您可以点击这个视图以显示饮料的详细视图不过 VStack内的静态元素是不可聚焦的除非显式声明在这里只有“接受”和 “取消”按钮是可聚焦的那么用户怎么知道他们能点击视图以显示饮料的详细视图呢？为提供更好的用户体验我希望高亮显示饮料信息文本元素以表明它是可交互的可以进行点击操作想要做到这一点可以将 accessibilityRespondsToUser Interaction修饰符设为“true” 应用该修饰符后本视图将拥有三个可聚焦元素：饮料信息文本 “接受”和“取消”按钮元素现在让我们进一步了解 AssistiveTouch光标框正如您所见对于AssistiveTouch 如果元素是可交互的或者可执行某个操作那么高亮显示被聚焦的元素很重要 AssistiveTouch 光标框与元素的可点击区域相同可点击区域小的元素将拥有一个小的光标框它可能会裁剪掉里面的内容为了让内容显得更清晰我们可以进行填充并让边界与对象的形状相匹配从而防止内容被裁剪在本例中 AssistiveTouch 光标形成的小圆圈突出显示了一个带有省略图像的 NavigationLink 我们可以对此加以改进方法是增加可点击区域的大小这也会改变AssistiveTouch 光标框的大小通过提供到contentShape 修饰符的路径您可以修改元素的可点击区域和光标框对于这个NavigationLink 我将可点击区域的形状设定为一个圆圈其大小为元素大小的1.5倍结果AssistiveTouch 光标框比元素更大在屏幕上更加容易看清现在让我们来看看 AssistiveTouch操作菜单 AssistiveTouch 操作菜单将视图中的系统默认操作和自定义操作显示在操作菜单列表里如果聚焦元素具有自定义操作优先显示自定义操作并出现在列表的最前面因此更方便进行交互如果元素是可调整的将显示减量或增量操作如果可访问性组元素包含自定义操作那么在聚焦该组元素时将显示这些操作如果在元素中已经为VoiceOver 增添了自定义操作那就太好了！这些操作将自动显示在 AssistiveTouch 操作菜单中自定义操作将显示为一个图标默认图像是自定义操作名称的首字母如果您希望为自定义操作图标提供图像您可以把带有图像的标签 accessibilityAction 修饰符好了今天的讲解到此结束现在您已经对 Apple Watch 的可访问性功能有了更好的了解记得要让您的应用程序支持Dynamic Type VoiceOver和 AssistiveTouch功能您拥有使用这些API的工具使您的 watchOS应用程序可被所有人访问感谢观看请继续观看其他WWDC课程！ ♪

struct PlantView: View {
    @Binding var plant: Plant
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(plant.name)
                .font(.title3)
            HStack() {
                PlantImage(plant: plant)
                PlantTaskList(plant: $plant)
            }
            PlantTaskButtons(plant: $plant)
        }
    }
}

5:00 - Line limits for PlantTaskLabel

struct PlantTaskLabel: View {
    let task: PlantTask
    @Binding var plant: Plant

    var body: some View {
        HStack {
            Image(systemName: task.systemImageName)
                .imageScale(.small)
            Text(plant.stringForTask(task: task))
        }
        .lineLimit(3)
        .font(.caption2)
    }
}

5:48 - Alternate layouts for PlantContainerView

struct PlantContainerView: View {
    @Environment(\.sizeCategory) var sizeCategory
    @Binding var plant: Plant
    
    var body: some View {
        if sizeCategory < .extraExtraLarge {
            PlantViewHorizontal(plant: $plant)
        } else {
            PlantViewVertical(plant: $plant)
        }
    }
}

8:56 - Element grouping for PlantCellView

struct PlantCellView: View {
    @EnvironmentObject var plantData: PlantData
    var plant: Plant
    
    var plantIndex: Int {
        plantData.plants.firstIndex(where: { $0.id == plant.id })!
    }
    
    var body: some View {
        NavigationLink(destination: PlantEditView(plant: plant).environmentObject(plantData)) {
            PlantContainerView(plant: $plantData.plants[plantIndex])
                .padding()
        }
    }
}

9:38 - Accessibility labels for PlantTaskLabel

struct PlantTaskLabel: View {
    let task: PlantTask
    @Binding var plant: Plant

    var body: some View {
        HStack {
            Image(systemName: task.systemImageName)
                .imageScale(.small)
            Text(plant.stringForTask(task: task))
                .accessibilityLabel(plant.accessibilityStringForTask(task: task))
        }
        .lineLimit(3)
        .font(.caption2)
    }
}

10:03 - Accessibility labels for PlantButton

struct PlantButton: View {
    let task: PlantTask
    let action: () -> Void
    @State private var isTapped: Bool = false
    
    var body: some View {
        Button(action: {
            self.isTapped.toggle()
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                self.isTapped.toggle()
            }
            action()
        }) {
            Image(systemName: task.systemImageFillName)
                .foregroundColor(task.color)
                .scaleEffect(isTapped ? 1.5 : 1)
                .animation(nil, value: 0)
                .rotationEffect(.degrees(isTapped ? 360 : 0))
                .animation(.spring(), value: 0)
                .imageScale(.large)
        }
        .buttonStyle(BorderedButtonStyle())
        .accessibilityLabel("Log \(task.name)")
    }
}

11:07 - Custom control accessibility for PlantTaskFrequency

struct PlantTaskFrequency: View {
    let task: PlantTask
    @Binding var plant: Plant
    let increment: () -> Void
    let decrement: () -> Void
    
    var value: Int {
        switch task {
        case .water:
            return plant.wateringFrequency
        case .fertilize:
            return plant.fertilizingFrequency
        default:
            return 0
        }
    }
    
    var body: some View {
        Section(header: Text("\(task.name) frequency in days"), content: {
            CustomCounter(value: value, increment: increment, decrement: decrement)
                .accessibilityElement()
                .accessibilityAdjustableAction { direction in
                    switch direction {
                    case .increment:
                        increment()
                    case .decrement:
                        decrement()
                    default:
                        break
                    }
                }
                .accessibilityLabel("\(task.name) frequency")
                .accessibilityValue("\(value) days")
        })
    }
}

19:50 - Make static element focusable

struct FreeDrinkView: View {
    @State var didCancel = false
    @State var didAccept = false
    @State var showDetail = false
    
    var body: some View {
        VStack(spacing:10) {
            FreeDrinkTitleView()
            
            FreeDrinkInfoView()
                .accessibilityRespondsToUserInteraction(true)
            
            HStack {
                CancelButton(buttonTapped: $didCancel)
                AcceptButton(buttonTapped: $didAccept)
            }
        }
        .onTapGesture {
            showDetail.toggle()
        }
        .sheet(isPresented: $showDetail, onDismiss: dismiss) {
            DrinkDetailModalView()
        }
    }
}

21:12 - AssistiveTouch cursor frame

struct DrinkView: View {
    var currentDrink:DrinkInfo
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            DrinkInfoView(drink:currentDrink)
            
            Spacer()
            
            NavigationLink(destination: EditView()) {
                Image(systemName: "ellipsis")
                    .symbolVariant(.circle)
            }
            .contentShape(Circle().scale(1.5))
        }
    }
}

22:48 - AssistiveTouch Action Menu

PlantContainerView(plant: plant)
    .padding()
    .accessibilityElement(children: .combine)
    .accessibilityAction {
        // Edit action
    } label: {
        Label("Edit", systemImage: "ellipsis.circle")
    }

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

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

资源

相关视频

WWDC21

WWDC20

WWDC19