WWDC Quick Look 💓 By SwiftGGTeam
Evaluate your app for Accessibility Nutrition Labels

Evaluate your app for Accessibility Nutrition Labels

观看原视频

Highlight

James(工程师)和 Lisa(设计师,法定视力障碍者)以合作评估 Landmarks app 的方式,完整演示了 Accessibility Nutrition Labels 的评估流程。


核心内容

App Store 产品页面上有海量 app,但视障用户、色盲用户、需要 310% 大文字才能阅读的用户,常常下载之后才发现 app 根本用不了。Lisa 是法定视力障碍者,她日常依赖最大字号完成阅读和工作;过去她没有办法在下载前知道一个 app 是否支持 VoiceOver、Larger Text、Dark Interface。

苹果在 2025 年推出 Accessibility Nutrition Labels,把 app 支持的无障碍特性直接展示在 App Store 产品页面上。开发者在 App Store Connect 中标注,用户在下载前就能看到。可标注的特性有 9 项:Sufficient Contrast、Dark Interface、Larger Text、Differentiate Without Color Alone、Reduced Motion、Voice Control、VoiceOver、Captions、Audio Descriptions。

评估方法是公共任务(common tasks)矩阵:先列出 app 的核心功能,加上首启、登录、购买、设置等通用流程;再让每一个公共任务对照每一项无障碍特性逐一测试。只要有一个公共任务做不下来,就不能标注该特性。本场 session 中 James 和 Lisa 真实评估了他们正在做的 Landmarks app,发现 Larger Text 测试中 collection 的描述被截断、文本框不随字号增长,于是决定先修 bug 再标注;最终标注了 6 项支持,2 项不适用(app 没有音视频,所以 Captions 和 Audio Descriptions 留空)。


详细内容

评估的起点是公共任务清单。James 在(01:24)强调:要标注一个特性,用户必须能用该特性完成 app 的全部公共任务。公共任务 = app 的主要功能 + 首启、登录、购买、设置这些通用流程。

对比度(Sufficient Contrast)05:10):要求前景与背景之间有足够对比度。如果默认配色不达标,需要在打开 Increase Contrast 设置后达标。Landmarks 的做法是:默认配色高对比,少数不达标的颜色在 Increase Contrast 打开时切换为备用颜色,明暗模式都要测。

深色界面(Dark Interface)06:06):除了支持 Dark Mode,还要测 Smart Invert 打开时颜色不会被错误反转——尤其是图片、视频等媒体内容应保持原色。

大文字(Larger Text)07:00):iOS 上文字至少要能放大到 200%;推荐使用 Dynamic Type。布局必须能容纳放大后的文字,不能截断、不能重叠。Lisa 个人需要 310%——所以建议尽量支持超过 200%。Landmarks 在 235% 字号下测试时发现 collection 描述被截断、编辑界面的文本框不随字号增长,他们决定先修复再标注。

不依赖颜色区分(Differentiate Without Color Alone)10:24):用形状、图标或文字配合颜色传达状态,色盲用户才不会漏掉信息。例子是删除按钮:除了红色,还要有垃圾桶图标。

减弱动态(Reduced Motion)11:26):触发眩晕的动画包括缩放/滑动转场、闪烁、自动播放动画、视差效果。Reduced Motion 设置打开时,应替换这些动画而不是简单去掉。

Voice Control 和 VoiceOver 共享同一套 accessibility API14:18)。Voice Control 依赖每个可交互元素提供 metadata——按钮的名字、搜索框的标签等。最常见的做法是给只有图标的按钮加 accessibilityLabel

// Add an accessibility label

import SwiftUI

struct LandmarkDetailView: View {
  @Environment(ModelData.self) var modelData
  let landmark: Landmark

  var body: some View {
    @Bindable var modelData = modelData
    DetailContentView()
      .toolbar {
        ToolbarItemGroup {
          Button {
          } label: {
            Image(systemName: "square.arrow.up")
          }
					.accessibilityLabel("Share")
        }
      }
   }
}

关键点:

  • Image(systemName: "square.arrow.up"):按钮只显示一个分享图标,没有可见文字。
  • .accessibilityLabel("Share"):把按钮的可访问性名字显式声明为 Share;这是一个修饰符,附在 Button 上而不是 Image 上。
  • Voice Control 用户说出 “Tap Share”,VoiceOver 用户聚焦该按钮时也会听到 “Share”——一处声明,两个辅助技术同时受益。
  • 评估 Voice Control 时只允许说 voice 命令,不能用触屏或光标补救(13:58)。

VoiceOver 测试14:53):用 Accessibility Shortcut 打开 VoiceOver,仅靠手势或键盘命令完成所有公共任务。Lisa 在现场演示了用滑动手势浏览 collection、双击激活、添加地标的完整流程。

不要标注无关特性02:25):Landmarks 没有音视频内容,因此 Captions 和 Audio Descriptions 留空,而不是为了”覆盖面”硬标。准确比覆盖更重要。


核心启发

  • 做什么:为现有 app 立刻列出公共任务清单。

    • 为什么值得做:这是标注 Accessibility Nutrition Labels 的入口,也是无障碍评估的最小可执行单位。没有清单,后续测试就是发散的。
    • 怎么开始:先写下用户下载 app 的核心动机(3-5 条),再补上首启、登录、购买、设置这 4 条通用流程;存到一个 Markdown 表格里,列是 9 项无障碍特性,行是公共任务。
  • 做什么:把 235% / 310% 大字号加入 QA 自查项。

    • 为什么值得做:Lisa 这种重度依赖大文字的用户,恰好能暴露布局上最难的 bug——文本框不随字号增长、描述被截断。这些 bug 在默认字号下完全看不到。
    • 怎么开始:在测试机上用「设置 > 辅助功能 > 显示与文字大小 > 更大字体」开启更大字号,拉到 235% 跑一遍核心任务;同步检查所有 TextField 是否能多行,所有列表 cell 是否会随字号增高。
  • 做什么:给所有”只有图标的按钮”加 .accessibilityLabel

    • 为什么值得做:这是 Voice Control 和 VoiceOver 都依赖的最低门槛 metadata。一行代码同时点亮两个辅助技术。
    • 怎么开始:在项目里搜 Image(systemName: 出现在 Button 内的位置,逐一加上 .accessibilityLabel("...");命名用动词或对象名,例如 “Share”、“Delete”、“Add Landmark”。
  • 做什么:把 Smart Invert 加进 Dark Mode 验收。

    • 为什么值得做:很多 app 自认为支持 Dark Mode,但 Smart Invert 打开时图片/视频/品牌色被错误反转,体验破碎。
    • 怎么开始:在「设置 > 辅助功能 > 显示与文字大小 > 智能反转」打开后,跑一遍 app;对所有展示型图片用 .accessibilityIgnoresInvertColors(true) 之类机制阻止反转。
  • 做什么:和真实用户合作做无障碍测试,而不是只做内部 QA。

    • 为什么值得做:Lisa 在 session 里反复强调”Nothing about us without us”——内部测试给不出的信号,例如哪些动画会让人眩晕、哪些字号才够用,只有真实用户才知道。
    • 怎么开始:通过用户研究渠道招募 1-2 位 VoiceOver 用户和 1 位需要大文字的低视力用户做远程测试;把发现的问题作为发版的 release blocker,而不是 P3 backlog。

关联 Session

评论

GitHub Issues · utterances