让你的app拥有视力辅助功能

让你的app拥有视力辅助功能

在设计时考虑辅助功能可以激励用户使用你的 app。了解如何为你的 app 创建自适应界面，app 颜色选取全面、文本可读性强并采用其他视觉设置，以使用户获取良好的体验。我们设计本节内容和设计用户界面的初衷一样，都是为了方便所有人访问。若想了解更多关于辅助功能和设计的信息，请查看“视觉设计和辅助功能”、“辅助功能检测”、“构建动态类型的 app”和“SF Symbols 指南”。

资源
- Accessibility for UIKit
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 打造无障碍的空间体验
WWDC21
- 创建 watchOS 的无障碍体验
WWDC19
下载

（你好 WWDC 2020）
你好欢迎参加全球开发者大会（让你的APP拥有视力辅助功能）大家好我是德鲁哈斯辅助功能团队的工程师今天我想谈谈如何让你的app拥有视力辅助功能当我们说起视力辅助功能你可能会想到旁白 iOS内建的屏幕阅读器这是对的因为旁白会念出屏幕上的文字它也允许你在不看设备的情况下进行操作并与你的设备进行互动但视力辅助功能远不止这些
视力丧失涉及的范围很广因为人们会体验不同程度的视觉障碍有些人拥有完好视力有些人则拥有部分视力或低视力而有些人则完全没有视力在这之间又有很多视力相关的情况比如色盲光敏感度、运动敏感度和其他的问题由于每个人对视力丧失的体验都不一样因此iOS提供了一系列视力辅助功能的设定让每个人都能以最适合自己的方式尽情使用设备今天我将谈谈几个很不错的方法可以让你的app 为所有人提供视觉体验首先我会谈谈app里的颜色和形状它们是彰显个人风格推广品牌的好方法（颜色与形状）接着我会分析何为“易读字体” 你可以利用app中不同的文本属性和页面布局来确保所有人都能获得良好的阅读体验最后在辅助功能设定里用户可以自定义他们的显示偏好设置这可能会改变你的app的显示方式在你让自己的app变得拥有视力辅助功能时我会确保你知道所有的注意事项在设计app时你可能会问自己 “我要怎么突出显示某些特定的用户界面元素？” 使用颜色通常能够很好地起到突出作用但我们不想只靠颜色那是因为对于色盲和低视力用户来说使用颜色来突出显示元素只会让人陷入迷失你还可以用其他方法来实现更好的设计给你个温馨提示是形状我在Apple Arcade里搜索新游戏《Sneaky Sasquatch》看起来很好玩在App Store里按钮的颜色是系统默认的蓝色而有些按钮会借助形状来让自己变得显眼
比如“开始游戏”的按钮它不只有颜色还有一个形状围绕着它这真的能让元素变得显眼让用户明白这不只是一个普通标签额外的可视化元素吸引了我的注意力但我等会儿才能玩这个游戏我们再来看另一个例子虽然标签栏在默认情况下只会使用颜色来表示当前所在页面但你可以在辅助功能设定里开启“按钮形状”的选项来获得更多的可视化元素如果你想在开启按钮形状的选项后按钮变得异常显眼我们会在iOS 14上推出新的API来帮助你实现这点（为开启此选项的用户提供显示选择）如果默认设计无法容纳按钮形状你应该为开启此选项的用户提供显示选择若想查看此设定请在UIAccessibility里调用buttonShapesEnabled 或者你可以观察buttonShapesEnabled- StatusDidChangeNotification 以便在设定改变时运行代码去年我们在iOS 13上为“不以颜色区分”加入了新API… （使用符号表达意思）（创建符号图像并改良SF SYMBOLS提供的图标） …而这是将这些想法应用在除按钮之外其他元素的好方法你应该把这种设计方法应用在各种事物上比如状态图标不同颜色的文本或者其他单靠颜色区别的事物上以表达意思如果你不确定要怎么开始那就试试SF Symbols吧我们提供超过1500种风格一致且高度可配置的符号供你的app使用有很多选择但如果你找不到一个理想的设计你可以通过拓展SF Symbols提供的图标创造出自己想要的图标很有趣吧？
SF Symbols真的很强大它们在任何大小和比例下都看起来很好看这意味着你不只可以获得漂亮的符号还能配置符号以匹配文本大小和风格让我们深入探讨我的用户界面设计我才刚开始通过颜色和形状来设计视觉体验我在设计一款星座查询app《Starstruck》开发初期是考虑视力辅助功能的最好时机但改变永远不嫌晚我有一份黄道星座清单我用颜色来区分每一个星座如果你是色盲这些颜色就无法如我所愿地突出显示既然我都在设计让它们变得显眼了我肯定不能只靠颜色所以我也为app设计了一些符号通过颜色和形状为每个星座提供独一无二的视觉体验这样一来更多人会在使用我的app时获得更有趣的浏览体验
我也选择性地使用了粗体文本来增加易读度我等会儿会详细说明这点当我们在app里使用颜色时请记住颜色对比在易读度方面扮演着很重要的角色你可以突出显示某个元素或者把它融入其他的元素里 “增强对比度”的辅助功能设定能升级颜色的对比度来突出显示元素 iOS提供了一系列的系统颜色它们能自动适应各种设定比如增强对比度如果你使用的不是系统颜色那你就必须知道这个设定好让你可以提升你app的视觉体验按一般的标准来说在浅色模式下颜色应该变深在深色模式下颜色应该变浅我知道这听起来有点混乱我举个例子在默认对比度的模式下我的星座符号会使用我设计的颜色而当我开启“增强对比度”选项后我就需要看到颜色更深的元素现在当我开启“增强对比度”这个选项时请仔细观察每个单元格里的符号变化准备好了吗？好了我知道这个变化看起来有点细微但这其实是很了不起的对于一些人来说对比度的增强能带来巨大的改变如果你的app采用的是像这样的自定义颜色和符号你需要增强色调或者提供备用资产来支持高对比度显示
在我的项目资源目录里我能够在“属性检查器”里配置符号的外观在“显示”选项下你可以勾选“高对比度”的选框为你的符号提供备用版本
当用户开启“增强对比度”的选项时高对比度的显示就会被应用 Xcode里的“辅助功能检查器”中有一个非常方便的“颜色对比度计算器” 你可以用这个小工具来计算任意两种颜色的对比度现在我正在计算我前景的白色符号和我自定义的紫色背景之间的对比度我得到的比率是4.5比1 大多数情况下这是最低的可接受比率接下来的是我符号的高对比度版本我加深了背景颜色让符号更加突出而比率也高了很多现在是7.5比1
好了现在我已经提供了各种版本我的任务也就完成了 iOS会根据用户的显示偏好设置在这两者之间自动转换（反色系统用户界面来加深亮白用户界面元素）我要重点感谢智能反转颜色它和深色模式一样能加深亮白用户界面元素区别在于智能反转颜色通常都会有高对比度所以对光较为敏感的人士可能会更喜欢这个功能（图片、视频和APP图标的颜色不应被反转）尽管我们推荐你的app支持深色模式但智能反转颜色是系统设定它能直接把反色用户界面应用到任何app 所以请牢记你的用户可能会更喜欢使用智能反转颜色（特别标记需要保持正常颜色的UIVIEW子类）你应该特别标记出你app里的某些元素好让它们不会受到颜色反转比如图片、视频和app图标
你可以在任何一个UIView子类里设置 accessibilityIgnoresInvertColors
（使用各种方法来创造视觉焦点）当你在设计颜色和形状时你应该使用各种方法来创造视觉焦点这样能帮助你的app打造个人风格这是很好的品牌推广方式… （颜色和形状是品牌化 APP体验的绝佳方法） …同时也能确保你app的丰富视觉体验具有包容性（如果你的默认设计并不便捷的话请观察并尊重大家的喜好）还有如果你的默认设计并不便捷的话请一定要观察并尊重人们的喜好
接下来我想谈谈字体易读度（字体易读度） iOS允许你改变设备上的字体大小较小的字体可以通过容纳更多文字来增加内容密度而较大的字体可以让用户更容易阅读然而有些人会依靠较大的字体来阅读设备上的内容（支持动态字体的APP 会适应你以下字体大小的选择）在设计app时请时时记住对清晰度和易读度至关重要的字体大小、粗细度和布局等因素我的建议是在设计初期就好好思考这些因素这可以确保你的app能适应各种内容大小还可以适应有着不同屏幕大小的设备（设计过程中牢记大型字体）在设计时请牢记大型字体（让标签换行而不是截断文本）当内容大小增加时你不应该截断文本这样才能确保用户不错过任何信息相反的你可以让标签换行然后尽可能地利用可用的显示宽度（符号和字形应随文本缩放）还记得我之前说过的符号吗？它们应该随着文本缩放
你可以覆写功能 traitCollectionDidChange, 当设备上的显示属性改变时这个功能就会被调用 UITraitCollection会让你获得设备的首选内容大小分类没错你可以使用比较运算符在枚举上进行比较这是我最喜欢做的事在《Starstruck》里当用户改变字体大小时我想计算看看这到底是默认的字体大小还是更大的辅助功能字体大小对于默认字体大小多层视图所涵盖的单元格符号和标签设定在了居中对齐的横轴上当用户开启辅助功能字体大小时我会翻转轴线并选择向左前对齐这允许我的标签利用整个显示屏的宽度而不是和符号一起共享屏幕我也总是会把标签行数设为“零” 而不是“一” 如果文本过长的话它就会根据需要换行
还记得我说过我选择性地使用粗体文本来增加易读度吗？使用“粗体文本”不只会让你的标签在符号旁边突出显示还能在文本里突出显示它们我有没有提过《Starstruck》让用户们对星座统计数据兴奋不已？在这里我选择性地使用粗体文本来为标题和标签细节创造视觉差异用粗体文本创造视觉焦点真的很棒事实上系统提供的字体样式能让你改变字体粗细度这等同于我们负责做粗重的活儿而你只需要坐享其成就好（选择性地改变字体粗细度以创造视觉重点和改善易读度） “粗体文本”辅助功能设定是专门为需要系统里所有文字都被突出显示的人们所设计的（“粗体文本”设定允许用户专注于文本）有时候细体字体甚至是默认字体样式都让人难以阅读（请尽可能使用系统字体样式）如果你app里的文本标签不是使用系统字体样式的话那它可能无法很好地适应“粗体文本”设定你可以在UIAccessibility上调用isBoldTextEnabled 来查看这个设定并手动更改你的字体样式最后我想谈谈一些能改变你app显示方式的几处其他显示偏好设置（显示偏好设置）在这款app里我在星座视图控制器里设置了视差效果视差效果是一种UIMotionEffect 它能帮助我在前景的星星和背景的浩瀚宇宙之间创造一种视觉深度当我轻轻移动设备时前景的星星会跟着移动而背景的图案则保持不动
另一种你应该比较熟悉的视差效果就在主界面上这些效果用起来感觉很有趣但它会让一些人感觉眼花缭乱还会让人有晕眩感我们提供了一系列显示调整功能供对动态效果敏感的人士开启使用当这些显示设定开启时… （当“减弱动态效果”开启时调整你app里的动态效果） …用户的设备会对动态效果进行一些调整比如停止小型闲置动画视差效果或其他的动态效果自动播放的视频或GIF图像文件甚至是滑动过渡效果我们喜欢使用这些效果来创造生动的软件体验但我们同时也需要聆听和尊重开启了这个选项的用户如果你要在app里使用夸张和大量的动态效果你可以在应用之前到UIAccessibility里使用isReduceMotionEnabled查看效果
你也可以在打开app时改变设定然后观察reduceMotionStatus- DidChangeNotification来做出调整
我想再和你谈谈“减弱动态效果”设定中的首选交叉淡变效果当我在各种视图控制器之间来回移动时视图的推移使用的是滑动效果下一视图控制器滑动过来覆盖住了之前的视图当我们开启“首选交叉淡变效果”选项时我们用比较不明显的的效果来取代滑动效果你现在也可以这么做了在iOS 14里我们会为 “首选交叉淡变效果”推出新的API 如果你已经在使用UIKits 和UINavigationController 这个设定就根本已经到手了但如果你在app里实施了自定义滑动效果那这个API就是为你而设的你可以在UIAccessibility里调用 prefersCrossFadeTransitions 来看看你是否需要淡变效果或观察它的通知最后要介绍的是“降低透明度”设定它会让模糊效果变得完全不透明最大的好处就是增加文本易读度因为一个模糊的背景可能会有不同程度的对比度这会让文本变得难以阅读在我的用户痴迷于查看星座数据时我加了一种视觉效果来模糊背景里的一些图案这能帮助我创造沉浸式的独特视觉体验但这并不适合每个人有些模糊效果会导致背景有着不同程度的对比度当它们出现在文字之下时有些用户会难以阅读屏幕上的文字或者会感到晕眩当“降低透明度”的选项开启之后系统的模糊和振动效果就会被调整成单一纯色对于一些人而言这会让阅读变得更容易如果你使用的不是系统模糊或振动视觉效果 UIAccessibility也会给你提供免费的API 来让你查看“降低透明度”的显示偏好设置通过应用这些显示设置你的app会在任何设备上都看起来完美无比这一切都是很重要的因为简而言之能够使用如此具有包容性和便捷的app 就等于赋予我们的客户更加得心应手的使用体验谢谢你们在让你的app 对所有人都变得无障碍这件事上所做出的努力现在我想请你们到辅助功能设定中找一下我今天说过的设定然后将它们一一开启这样你就能看到你app的变化你会惊讶于那些美好的变化而这也会是你思考下一步该做什么的美好起点谢谢大家

func observeButtonShapesNotification() {
    // Make buttons more visible by using shapes.
    // If your default design does not include button shapes, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateButtonShapes), name: UIAccessibility.buttonShapesEnabledStatusDidChangeNotification, object: nil)
}

@objc func updateButtonShapes() {
    if UIAccessibility.buttonShapesEnabled {
        // Use extra visualizations for buttons.
    } else {
        // Use default design for buttons.
    }
}

3:31 - Differentiate Without Color

func observeDifferentiateWithoutColorNotification() {
    // Use symbols or shapes to convey meaning instead of relying on color alone.
    // If your default design does not differentiate without color, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateColorAndSymbols), name: NSNotification.Name(UIAccessibility.differentiateWithoutColorDidChangeNotification), object: nil)
}

@objc func updateColorAndSymbols() {
    if UIAccessibility.shouldDifferentiateWithoutColor {
        // Use symbols or shapes to convey meaning.
    } else {
        // Use default design.
    }
}

7:47 - Smart Invert Colors

extension UIView {
    @available(iOS 11.0, tvOS 11.0)
    var accessibilityIgnoresInvertColors: Bool { get set }
}

9:57 - Large Text

// ZodiacConstellationCell.swift


override func traitCollectionDidChange (_ previousTraitCollection: UITraitCollection?) {

     if (traitCollection.preferredContentSizeCategory       
         < .accessibilityMedium) { // Default font sizes

         stackView.axis = .horizontal
         stackView.alignment = .center

     } else { // Accessibility font sizes

         stackView.axis = .vertical
         stackView.alignment = .leading

     }
}

11:33 - Bold Text

func observeBoldTextNotification() {
    // Update labels to use bold or heavy font styles.
    // If you aren't using system font styles, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateLabelWeight), name: UIAccessibility.boldTextStatusDidChangeNotification, object: nil)
}

@objc func updateLabelWeight() {
    if UIAccessibility.isBoldTextEnabled {
        // Use bold or heavy font weight
    } else {
        // Use font weight that is default to your design.
    }
}

13:08 - Reduce Motion

func observeReduceMotionNotification() {
    // Observe this notification to reduce or remove the frequency and intensity of motion effects.
    NotificationCenter.default.addObserver(self, selector: #selector(updateMotionEffects), name: UIAccessibility.reduceMotionStatusDidChangeNotification, object: nil)
}

@objc func updateMotionEffects() {
    if UIAccessibility.isReduceMotionEnabled {
        // Reduce or remove extraneous motion effects.
    } else {
        // Use default motion effects.
    }
}

13:51 - Prefers Cross-fade Transitions

func observeCrossFadeTransitionsNotification() {
    // Reduce or remove sliding animations for transitioning views.
    // If you aren't using system-provided navigation, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateTransitionEffects), name: UIAccessibility.prefersCrossFadeTransitionsStatusDidChange, object: nil)
}

@objc func updateTransitionEffects() {
    if UIAccessibility.prefersCrossFadeTransitions {
        // Replace sliding transitions with cross-fade animations.
    } else {
        // Use default sliding transitions.
    }
}

15:07 - Reduce Transparency

func observeReduceTransparencyNotification() {
    // Reduce or remove transparency by adjusting these effects to be completely opaque.
    // If you aren't using system-provided visual effects for blurs or vibrancy, observe this notification to make visual changes.
    NotificationCenter.default.addObserver(self, selector: #selector(updateTransparencyEffects), name: UIAccessibility.reduceTransparencyStatusDidChangeNotification, object: nil)
}

@objc func updateTransparencyEffects() {
    if UIAccessibility.isReduceTransparencyEnabled {
        // Make transparency effects opaque.
    } else {
        // Use default transparency.
    }
}

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

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

资源

相关视频

WWDC23

WWDC21

WWDC19