优化自定控件的辅助功能体验

完善 App 的交互式元素，让人人都能方便使用，从而充分释放这些元素的潜力。我们将详细讲解用户如何借助旁白及其他辅助技术来理解并使用控件；还将介绍多种输入方法，例如操作、透视手势和直接触控。与我们一起深入探索多个示例控件，优化提升每个控件的辅助功能体验。

章节

资源

相关视频

WWDC24

了解 SwiftUI 中的辅助功能

你好我是Khin 是无障碍团队的软件工程师自定义UI控件让用户能够在你的App中做出独特而富有创意的事情它们让用户能够使用手势以及超越标准控件的各种交互方式在Apple 我们相信技术服务所有人时才能发挥最大效用这意味着为使用辅助技术的用户带来出色的体验例如VoiceOver Switch Control等让控件支持无障碍访问确保所有人都能使用你的App所提供的核心功能在本节中我将探讨如何让App中的任何控件都支持无障碍访问首先我将介绍一些你可以参考的指导原则然后展示如何将这些原则应用于几个复杂的控件现在来谈谈这些指导原则来看这个滑块控件这是SwiftUI中的标准滑块即使你是第一次看到它你可能已经从外观上了解了很多关于它的信息它包含一条轨道以及轨道上的一个滑块手柄手柄大约位于轨道的中间位置手柄看起来也像是可以被抓取的因此可以通过拖动来移动通过这些视觉信息你可以获得很多关于该控件的隐性提示你可以判断出这个控件表示一个连续的值你也知道当前的值是多少在本例中大约是最大值的一半你也能识别出操作手势例如如何改变其值手柄看起来可以拖动当你拖动时反馈是即时的轨道填充手柄移动清晰地反映了操作已发生这一切无需任何解释一眼即可理解你的大脑处理了形状位置以及预期行为这一切都在瞬间完成这就是视觉信息的强大之处那么如果有人看不到屏幕呢轨道手柄位置这些都无从得知并非每个人都能获取视觉信息因此有必要考虑使用辅助技术的用户将如何与此类控件进行交互

以下是VoiceOver 描述这个滑块的方式 VoiceOver是Apple平台上内置的屏幕阅读器它让视障或低视力用户能够通过手势与设备交互 "亮度 50% 可调整" "用单指向上或向下轻扫以调整值" 通过VoiceOver 用户能够了解滑块所控制的内容标签显示为"亮度" 还会提示该控件有一个值且当前设置为50% 用户可以采取的操作也一目了然它显示为可调整并提示如何调整值当值发生变化时会实时播报新的值这就是用户获得的反馈 VoiceOver用户可以获得出色的体验即便无法看到控件的视觉效果

思考用户从控件视觉形式中所能获取的信息将这些信息作为你的指导原则来构建自己的无障碍体验确保控件的用途清晰易懂若控件表示一个值请将该值提供给辅助技术明确用户可以采取的操作以及如何获得反馈在使用控件的过程中

这是另一个示例我咖啡机App中的一个自定义控件有些早晨需要满满一杯有些早晨只需半杯这取决于我是被闹钟叫醒还是被嚎叫的猫吵醒于是我开发了一款App 让我能控制每次冲泡的咖啡量只需一个简单的手势向上拖动增加咖啡量向下拖动减少咖啡量填充量表示要冲泡的盎司数目前这个控件没有提供任何额外的无障碍信息来支持无障碍访问当我向右轻扫选中控件时 VoiceOver无法描述其功能或用户如何更改其值 "设置" "按钮"

"6盎司" "在杯子上向上或向下拖动" 目前尚不清楚如何与此控件进行交互不过别担心只需几个简单步骤即可改进为此我将重新回顾之前介绍的指导原则以下是CoffeeDispenserView的实现代码目前它仅将咖啡量声明为State 并传递给滑块首先我将把滑块标记为无障碍元素为赋予其明确用途我使用accessibilityLabel修饰符将其命名为"Coffee Dispenser" 然后使用 accessibilityValue修饰符来播报当前的填充量我还想让VoiceOver能够调整咖啡滑块与内置滑块的方式相同我将为这个控件添加相同的交互方式首先添加一个名为.adjustable的特征这会告知VoiceOver 该控件可以通过轻扫来调整然后定义每次轻扫的操作使用.accessibilityAdjustableAction修饰符该闭包提供一个方向参数值为.increment或.decrement 闭包应处理每种情况

完成这些更改后这是全新的VoiceOver体验向右轻扫选中控件然后向上和向下轻扫以调整所需的咖啡量 "Coffee dispenser 6盎司可调整" "用单指向上或向下轻扫以调整值"

"7盎司" "8盎司" "7盎司" "6盎司" 用户现在可以使用VoiceOver 每次以1盎司为单位调整咖啡量

但如果有人更挑剔想要以半盎司为单位调整呢精确控制方面 VoiceOver内置了一种称为穿透手势的功能

要执行穿透手势 VoiceOver用户可以双击并按住以激活手势从控件的 accessibilityActivationPoint开始当用户的手指移动时 VoiceOver会将触摸事件直接发送给控件这使用户能够对值进行更精确细致的控制对于咖啡滑块无障碍激活点默认位于中心位置我将把它设置为与当前填充量相匹配这样手势始终从咖啡液面处开始为向任意方向调整留出操作空间

在穿透手势期间为用户提供反馈也很重要为此我会发布无障碍通知当值发生变化时但不是每次变化都播报那样会太嘈杂我会改为记录上次播报的内容和时间如果值确实发生了变化且已过了至少0.3秒那么就播报否则跳过这样 VoiceOver用户就能听到有意义的更新

现在我将双击并按住然后向上移动手指尝试一个穿透手势将咖啡量填充至9.5盎司 "Coffee dispenser 6盎司可调整" "用单指向上或向下轻扫以调整值"

"六... 6.4盎司" "六... 六... 七... 七... 七点... 8.3盎... 8.4盎司" "8.5盎... 8.6盎司" "8.7盎司" "8.8盎... 9... 9.5盎司"

太棒了控件现在可以拖动并能提供有意义的更新体验现在达到了我之前分享的指导原则所提出的要求包含标签值操作和通知现在我已经探讨了基本的自定义控件接下来看一些更复杂的示例这是我在iOS上最喜欢的功能之一背景声音让我可以播放环境音频例如雨声或海浪声帮助我集中注意力和放松你可以直接在无障碍设置中找到它设置中有一个均衡器控件这是一个二维面板你可以将中心的手柄移动到面板上的任意位置这个面板有两个维度可以移动来调整音调视觉上每个轴都有频率和振幅符号当你抓住手柄时实际上可以探索这两个值的空间同时进行调整对于滑块可调整特征提供了两种操作递增和递减在单个轴上但对于这个控件有两个轴水平和垂直添加可调整特征只能覆盖一个方向因此这不是理想的解决方案这正是自定义操作发挥作用的地方自定义操作让你能够公开控件的常用操作每个操作都有一个标签 VoiceOver会朗读出来以及激活时运行的闭包与可调整操作不同自定义操作支持你定义的任何操作不限于单个轴对于这个均衡器面板以下是添加自定义操作的方式在均衡器面板视图上 accessibilityAction修饰符被添加了四次每个操作都有一个描述性名称向上移动向右移动向下移动向左移动每个操作以固定步长移动单个轴在此范围内限制这些操作让用户能够探索整个空间只需执行那些已被人们所熟悉的操作依赖辅助技术的用户

以下是使用自定义操作操作均衡器面板的体验我将向上和向下轻扫以选择操作然后双击执行 "滤波器图表频率0 振幅10" "双击并按住然后拖动以调整滤波器" "图表轴的范围设置为-100至100" "向上或向下轻扫以选择自定义操作" "然后双击以激活" "向下移动" "向上移动" "向右移动" "向左移动" "向右移动" "向上移动" "频率0 振幅20" "频率0 振幅30" "频率0 振幅40"

用户可以通过操作在2D空间中导航声音本身提供了清晰的反馈

均衡器面板是一个很好的示例展示了平台如何将每项指导原则应用于自身的体验设计现在我想向你展示我一直在开发的一款App 它有自己的自定义控件如果你和我一样一定很爱你的宠物当你外出上班时真的会很想念它们为了让我在白天有伴我开发了一款App 让我能与我的猫互动就在屏幕上抚摸它它会发出呼噜声点击它它会喵喵叫捏它嗯它是猫嘛当然会嘶嘶地回击你就像真实的猫一样我还没有为这个控件添加任何无障碍支持我将查看VoiceOver的默认体验 "Cat fill 空格图像" "触摸猫咪进行互动" 只是说屏幕上有一张图片抚摸点击和捏合是该控件支持的所有手势但VoiceOver不知道它们的存在

所有这些特色呼噜声揉捏声愤怒的喵喵声这些都在那里等待着与依赖辅助技术的用户分享 VirtualCat是一个SwiftUI视图包含互动猫咪界面为了表达控件的用途我添加了一个无障碍标签内容为"Virtual Cat" 然后将无障碍值设置为猫咪当前的反应现在我需要一种方式向VoiceOver展示与猫互动的手势用户可以使用穿透手势但这里可能不是最佳选择例如用户可能希望反复执行某个操作或使用多种手势因此对于这个控件我将使用直接触摸直接触摸API将屏幕的某个区域标记为直接触摸区域当你添加 allowsDirectInteraction特征时触摸事件会直接传递给控件而不是由VoiceOver处理这样用户可以直接与控件交互从而使用所有该控件支持的手势你可以使用直接触摸选项自定义此行为第一个选项是.requiresActivation 设置后控件不会响应直接触摸直到用户双击这允许用户在屏幕上拖动手指而不会意外激活它与穿透手势不同直接触摸会保持活动状态直到焦点移至另一个元素另一个选项是.silentOnTouch 设置后 VoiceOver 会保持完全静默当用户触摸该区域时这适用于提供自身音频反馈的控件在这种情况下VoiceOver的语音会覆盖控件本身的音频为使此控件可交互我将添加 .accessibilityDirectTouch修饰符并使用.requiresActivation选项

请注意并非所有人都能执行直接触摸手势因此尽可能提供其他与控件交互的方式例如使用自定义操作

以下是更新后的VoiceOver体验我可以双击以激活直接触摸然后尝试抚摸点击和捏合猫咪

"Virtual cat 睡觉中" "激活以开始直接触摸交互" "操作可用"

"Virtual cat" "睡觉中"

完成这些更改后 VoiceOver用户了解了控件的描述以及执行直接触摸的手势他们还能从交互中获得反馈这将这款App中所有令人愉快的体验带给了使用辅助技术的用户

让你自己的自定义交互控件对所有人都可访问打开VoiceOver 启动你的App 找到改进的机会构建自定义控件时考虑用户能否理解控件的用途值操作和反馈当你的控件依赖手势时考虑使用直接触摸而穿透手势并不最适合的情况下并尽可能提供自定义操作这样使用Switch Control Voice Control 以及其他辅助技术的用户都能进行相同的交互感谢收看

5:01 - Improve accessibility for coffee dispenser

// Improve accessibility for coffee dispenser

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityElement()
            .accessibilityLabel("Coffee Dispenser")
            .accessibilityValue("\(Int(coffee)) ounces")
            .accessibilityAddTraits(.adjustable)
            .accessibilityAdjustableAction { direction in
                switch direction {
                case .increment:
                    increaseCoffeeAmount()
                case .decrement:
                    decreaseCoffeeAmount()
                }
            }
    }
}

7:05 - Set the accessibility activation point

// Set the accessibility activation point
import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0

    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityActivationPoint(
                UnitPoint(x: 0.5, y: 1 - coffee)
            )
    }
}

7:27 - Post accessibility announcements

// Post accessibility announcements 

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
  
    var body: some View {
        CoffeeSlider(value: coffee)
            // ...
            .onChange(of: coffee) { _, newValue in
                if sufficientTimeSinceLastAnnouncement() && valueHasChanged() {
                    cacheLastSpokenValue(newValue)
                    AccessibilityNotification
                        .Announcement(newValue)
                        .post()
                }
            }
    }
}

10:13 - Add custom actions

// Add custom actions

import SwiftUI
                                                          
struct EqualizerView: View {
    var body: some View {
        EqualizerPad()
            .accessibilityActions("Move Up") {
                increaseY(by: 10)
            }
            .accessibilityActions("Move Right") {
                increaseX(by: 10)
            }
            .accessibilityActions("Move Down") {
                decreaseY(by: 10)
            }
            .accessibilityActions("Move Left") {
                decreaseX(by: 10)
            }
     }
 }

12:47 - Customize accessibility for the interactive cat surface

// Customize accessibility for the interactive cat surface

import SwiftUI

struct VirtualCat: View {
    var cat: CatModel
    var body: some View {
        InteractiveCatSurface()
            .accessibilityLabel("Virtual Cat")
            .accessibilityValue(cat.currentReaction.description)
            .accessibilityDirectTouch([.requiresActivation])
     }
}

0:01 - Introduction
Why custom controls need accessibility support so everyone can use what your app was built to do, and what the session covers — guiding principles and how to apply them to complex controls.
1:02 - Guiding principles
Create accessible custom controls by translating implicit visual cues into explicit information for assistive technologies. Apply labels, values, traits, and actions to ensure these controls are universally understood and actionable by everyone.
8:41 - Complex controls
Complex controls, like multi-dimensional pads and highly interactive virtual surfaces, demand advanced accessibility techniques beyond basic labels and values. Implementing features like passthrough gestures, custom actions, and the Direct Touch API allows people to seamlessly navigate and interact with these interfaces.

探索“入门汇总”

及时了解最新动态

探索“平台”

精选

探索“技术”

精选

探索“社区”

精选

探索“文档”

发布说明

探索“下载”

精选

探索“支持”

精选

快速链接

优化自定控件的辅助功能体验

章节

资源

相关视频

WWDC24