让所有人都能更方便地使用你的 Mac App

了解如何整合那些可充分利用 macOS 强大功能和灵活性的辅助功能。深入探索如何支持“旁白”和“语音控制”，如何改进视图的布局，以及辅助技术如何导航你的内容，等等。

章节

0:00 - 开场介绍
0:44 - 布局
7:48 - 导航
9:52 - 交互

资源

相关视频

WWDC24

了解 SwiftUI 中的辅助功能

WWDC21

SwiftUI 辅助功能：超越基础功能

大家好我叫 Nicholas 是辅助功能团队的工程师辅助功能让每个人都能体验并爱上你创建的 App 今天我将深入介绍如何让所有人都能更方便地使用你的 Mac App Mac App 主要通过键盘和鼠标进行交互具有更密集的用户界面和强大的多任务处理能力这些 Mac 特有的属性带来了一些重要的辅助功能考量今天我将一一介绍

这包括将 App 的布局传达给辅助功能加快 App 内的导航速度以及使 App 内的交互更易于使用在 Mac 上 App 有充足的空间来显示控件和内容就像你从视觉上设计界面布局使它容易理解且直观易用思考如何将界面布局传达给辅助功能技术也非常重要 SwiftUI 将构成 App 的各个视图作为辅助功能元素来传达辅助功能元素包含辅助功能技术理解和与你的 App 交互所需的信息如果你对辅助功能元素不熟悉建议你观看 WWDC24 讲座 “了解 SwiftUI 中的辅助功能” 我正使用 SwiftUI 构建一个新的 Mac App 来编辑文本文稿

它有一个边栏可以切换页面以及用书签标记重要页面

还有一个包含控件的检查器我可以用来设置所选文本的格式包括一个样式预设列表我可以用来一次性应用多个格式选项

我真心希望它成为一款出色的 Mac App 我知道这意味着让所有人都能更方便地使用它所以从一开始我就在设计基础的辅助功能并测试我使用“旁白”添加的新功能

“旁白”是一款屏幕朗读器可以辅助不同视力水平的人使用你的 App 旁白能将 App 界面转为语音朗读在无障碍文本编辑器上使用旁白或转换为盲文使用旁白也是测试 App 辅助功能的绝佳方式因为它可以充分利用 App 提供的所有辅助功能信息如果你的 App 与旁白配合良好那么它也将能够良好地兼容其他辅助功能技术比如语音控制和切换控制

在 Mac 上旁白主要通过键盘快捷键控制例如可以使用键盘快捷键移动到屏幕上的下一个和上一个元素使用这些键盘快捷键我可以将旁白焦点一次移动到一个元素上以收听对应元素的描述

最小化按钮全屏按钮工具栏我的文本文稿边栏表垂直分隔线编辑文本在文本末尾插入垂直分隔线格式检查器滚动区域鼠标在屏幕上快速移动即可完成的操作对于使用旁白功能的用户来说可能需要多次按键

在后台旁白会移动到 SwiftUI 提供的下一个辅助功能元素

为了加快旁白的导航速度 SwiftUI 可以将辅助功能元素分组为容器辅助功能元素

旁白使用键盘快捷键将焦点移入和移出这些容器默认情况下在 Mac 上旁白按容器导航以便更快地在 App 中移动并且仅在需要时将焦点放入容器 Mac 上的辅助功能与 iPhone 和 iPad 等其他平台的一个主要区别在于 Mac 上的容器通常包含嵌套容器形成树状的辅助功能元素结构这个结构代表着 App 界面在你的 App 中将相关元素分组到容器中以加快旁白的导航速度

同时也要注意避免创建太多层嵌套容器有时这会导致更难以在 App 中找到元素并增加反复聚焦容器的时间

要优化 App 中的容器可以使用 accessibilityElement children 修饰符

将修饰符应用于视图时指定的行为将决定视图和它的子视图如何传达给辅助功能有三种不同的行为选项

contain 将视图表示为辅助功能容器子视图是容器中的辅助功能元素

combine 将视图和它的子视图表示为一个辅助功能元素将它们的所有属性和操作合并在一起 ignore 将视图表示为一个辅助功能元素完全忽略子视图

当我使用旁白测试 App 时我发现了几个需要优化的地方首先我使旁白焦点逐个元素地在右侧的格式检查器中移动在格式检查器中滚动区域 22 个项目标题样式标题应用按钮副标题应用按钮小标题应用按钮正文应用按钮粗体切换按钮我注意到我必须浏览完每一个样式预设才能到达“粗体切换按钮” 这些样式预设使用 VStack 显示

我可以使用 accessibilityElement children 修饰符和 VStack 上的 contain 行为来创建一个容器还可以使用 accessibilityLabel 修饰符来为这个容器命名

现在我将再次尝试使旁白焦点逐个元素地在右侧的格式检查器中移动在格式检查器中滚动区域 15 个项目标题样式样式预设组粗体切换按钮这太棒了我无需遍历所有样式预设除非我确实需要这样做我想确保在这个样式预设容器内导航正常我将旁白焦点放到样式预设容器中然后使旁白焦点逐个元素地移动

在样式预设中组 8 个项目标题应用按钮副标题应用按钮小标题应用按钮正文应用按钮导航正常工作但我注意到旁白分别聚焦到每个样式预设的标题和应用按钮上

样式预设由包含标题视图和按钮视图的 HStack 表示

我可以使用 accessibilityElement children 修饰符和 HStack 上的 combine 行为来创建一个辅助功能元素它将标题视图和按钮视图的属性合并到一起

现在我将再次尝试使旁白焦点逐个元素地在样式预设容器中移动在样式预设中组 4 个项目标题应用按钮副标题应用按钮小标题应用按钮正文应用按钮现在我可以将每个样式预设作为一个元素来浏览这样更容易导航和理解

辅助功能结构另一个可以优化的方面是元素的顺序在这个示例中作者显示在书名之前但我希望旁白先朗读书名因为这样方便快速浏览大量书籍我可以使用 accessibilitySortPriority 修饰符改变辅助功能元素的顺序

如果我赋予书名视图更高的优先级它将排在第一位默认情况下视图的排序优先级为零具有相同优先级的视图按照视觉位置排序现在旁白会先朗读书名然后再朗读作者和描述在使用旁白测试 App 时如果感觉顺序不合理请使用 accessibilitySortPriority 修饰符

现在 App 的辅助功能结构已经优化完毕我想通过转子进一步优化导航

借助 App 中的书签功能用户可以快速浏览页面列表查看哪些页面添加了书签但是使用旁白的用户则必须逐页浏览才能知道它们是否添加了书签第 2 页已添加书签第 3 页第 4 页第 5 页已添加书签第 6 页第 7 页第 8 页已添加书签第 9 页第 10 页为了让这个过程像视觉体验一样简单使用旁白的用户需要能够仅按已添加书签的页面进行导航

为此我可以使用转子转子是加快使用旁白的用户导航速度的重要方式转子允许你在 App 中定义视图或文本范围的集合以便在它们之间快速移动要将书签转子添加到我的页面列表我将使用 accessibilityRotor 修饰符将它命名为“书签” 我可以有条件地声明要将哪些页面包含在“书签”转子中现在当我将旁白焦点放在边栏中的页面列表上时我可以使用键盘快捷键打开转子菜单在这里我可以快速浏览所有书签并直接跳转到我想要的书签页面书签菜单第 2 页第 5 页第 5 页已添加书签

辅助功能转子使原本对旁白用户而言耗时又复杂的导航体验变得简单流畅

当我使用旁白在 App 中导航时我移动的是旁白焦点旁白等辅助功能技术维护自己的焦点状态独立于键盘焦点

在 macOS 和 iOS 26 中你的 App 可以建议一个初始焦点供旁白等辅助功能技术使用这通过 accessibilityDefaultFocus 修饰符来实现当出现新场景时 SwiftUI 会建议聚焦于带有这个修饰符的视图同时仍然允许辅助功能技术根据用户的偏好做出最优决策

现在我已经可以轻而易举地导航到 App 中的所有元素我还想确保与这些元素的交互也同样便捷我在 App 中添加了一个功能将鼠标悬停在页面缩略图上时会弹出一个按钮用于为页面添加书签从视觉上看这很不错因为当我不需要这个按钮时缩略图不会被遮挡但是由于旁白用户不会移动指针他们永远无法使用这个按钮

在 App 中任何依赖悬停指针或触控板手势的交互可能并非人人可用你应该提供其他方式来发现和执行这些交互

幸运的是 SwiftUI 提供了一种简单的方法来实现这一点你可以向视图添加辅助功能操作以便旁白等辅助功能技术可以提供无障碍的执行方式要向视图添加辅助功能操作使用 accessibilityAction 修饰符我使用这个修饰符向页面列表中的视图添加书签操作就像添加按钮一样简单

现在我将使用旁白来聚焦于页面缩略图并使用新的书签辅助功能操作第 3 页操作菜单两个项目显示备选项为第 3 页添加书签为第 3 页添加书签

我能够使用键盘快捷键打开操作菜单并轻松为页面添加书签其他辅助功能技术例如切换控制和语音控制也依赖于这些辅助功能操作

另一个快速改善 App 交互的方法是键盘快捷键为 App 中的常见任务添加键盘快捷键不仅是一项强大的高级用户功能对辅助功能也有很大帮助尤其是对于无法使用鼠标的用户最后如果你创建自己的自定控件它们可能不具备其他控件内置的辅助功能信息要了解如何在 SwiftUI 中轻松实现控件辅助功能我建议你观看“SwiftUI 辅助功能：超越基础功能” 这是一个 WWDC21 讲座现在该轮到你了不妨在 Mac 上使用旁白测试你的 App 优化 App 中的容器并研究可以在哪里添加自定转子最后你可以使用辅助功能标签彰显 App 出色的辅助功能要进一步了解请观看 “针对辅助功能标签评估你的 App” 感谢观看

4:15 - Contain subviews within accessibility container

// Contain subviews within accessibility container

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .contain)
  }
}

4:23 - Combine subviews into one accessibility element

// Combine subviews into one accessibility element

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .combine)
  }
}

4:33 - Hide subviews from accessibility

// Hide subviews from accessibility

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      FirstView()
      SecondView()
    }
    .accessibilityElement(children: .ignore)
  }
}

5:12 - Contain style presets in accessibility container

// Contain style presets in accessibility container

import SwiftUI

struct FormattingInspectorView: View {
  var body: some View {
    Form {
      VStack {
        StylePresetView(type: .title)
        StylePresetView(type: .heading)
        StylePresetView(type: .subHeading)
        StylePresetView(type: .body)
      }
      .accessibilityElement(children: .contain)
      .accessibilityLabel("Style Presets")
    }
  }
}

6:21 - Merge Title View and Button into one accessibility element

// Merge Title View and Button into one accessibility element

import SwiftUI

struct StylePresetView: View {
  let preset: StylePreset
  
  var body: some View {
    HStack {
      PresetTitleView(preset: preset)
      Button("Apply") { /* ... */ }
    }
    .accessibilityElement(children: .combine)
  }
}

7:01 - Set the order of accessibility elements

// Set the order of accessibility elements

import SwiftUI

struct BookDetailsView: View {
  let book: Book

  var body: some View {
    VStack {
      Text(book.author)
      Text(book.title)
        .accessibilitySortPriority(1)
      DescriptionView(book: book)
    }
    .accessibilityElement(children: .combine)
  }
}

8:43 - Add an accessibility rotor for bookmarked pages

// Add an accessibility rotor for bookmarked pages

import SwiftUI

struct PagesView: View {
  @Binding var pages: [Page]
  
  var body: some View {
    List(pages) { page in
      PageListItemView(page: page)
    }
    .accessibilityRotor("Bookmarks") {
      ForEach(pages) { page in
        if page.isBookmarked {
          AccessibilityRotorEntry(page.title, id: page.id)
        }
      }
    }
  }
}

9:33 - Set the default VoiceOver focus

// Set the default VoiceOver focus

struct MyView: View {
  @AccessibilityFocusState(for: .voiceOver) var focusedForVoiceOver

  var body: some View {
    FirstView()
    SecondView()
      .accessibilityDefaultFocus($focusedForVoiceOver, true)
    ThirdView()
  }
}

10:28 - Add an accessibility action to bookmark the page

// Add an accessibility action to bookmark the page

import SwiftUI

struct PageListItemView: View {
  var page: Page
  
  var body: some View {
    VStack() {
      ThumbnailView(page: page)
      Text(page.title)
    }
    .onHover { /* ... */ }
    .accessibilityAction(named: page.isBookmarked ? "Remove Bookmark" : "Bookmark") {
      page.isBookmarked.toggle()
    }
  }
}

0:00 - 开场介绍
了解如何增强 Mac App 的辅助功能。探索布局呈现、导航加速和交互辅助功能方面的最佳做法，确保每个人都能畅享 Mac App。
0:44 - 布局
借助 macOS 上的 SwiftUI，你可以让所有人都能轻松使用你的 App，尤其是那些依赖旁白的用户。SwiftUI 会从视图创建辅助功能元素，但你应该优化这个结构以实现最佳导航体验。 macOS 辅助功能的关键方面包括将相关元素分组到容器中，形成树状结构，从而加快导航速度。你可以使用 accessibilityElement(children:) 等修饰符来指定视图及它们的子视图是表示为容器、组合元素还是被忽略。例如，在 Nicholas 的文本编辑器 App 中，通过将样式预设分组并将“标题”和“应用”按钮组合为单个元素，对格式检查器进行了优化。此外，使用 accessibilitySortPriority 修饰符可对元素重新排序，确保首先读取更重要的信息。
7:48 - 导航
示例 App 通过转子增强了辅助功能，转子是一种旁白功能，可让用户在特定内容 (如已添加为书签的页面) 之间快速跳转。这简化了导航流程，让使用旁白的用户也能高效地进行导航。SwiftUI 中新增的修饰符可以建议初始焦点。
9:52 - 交互
在 SwiftUI App 中，确保所有交互不仅限于基于指针的操作方式。请为使用旁白、切换控制和语音控制的用户提供辅助功能操作和键盘快捷键。