增强动态 UI 元素的 VoiceOver 辅助功能
在创建包容性 iOS 应用程序时,开发人员经常面临 VoiceOver 功能的独特挑战。一个常见的问题是 UIView 的辅助功能文本是否可以根据焦点移动的方向动态调整。 🧭
想象一个带有 顶部标签、充当单元格网格的集合视图和 底部标签 的布局。集合视图中的每个单元格都可以独立访问,为屏幕阅读器用户提供简化的体验。但有时,默认的辅助功能行为并不能完全满足用户的需求。
例如,当用户从顶部标签导航到集合视图中的第一个单元格时,提供其他上下文(例如“具有 n 行和列的表格”)可能会很有用。这增强了清晰度和可用性,特别是对于网格或复杂的数据结构。
另一方面,当反向导航时,从 底部标签 返回到最后一个单元格,自定义文本可以使交互感觉更加直观和无缝。让我们通过实际示例深入探讨如何在 Swift 中实现这种动态调整。 🚀
命令 | 使用示例 |
---|---|
UIAccessibility.elementFocusedNotification | 每当 VoiceOver 焦点更改为新元素时,就会触发此通知。这对于动态更新可访问性标签以响应焦点方向至关重要。 |
UIAccessibility.focusedElementUserInfoKey | 用于从通知的 userInfo 字典中提取当前聚焦的元素,从而允许识别焦点中的特定 UIView。 |
didUpdateFocusIn | UICollectionViewDelegate 中的委托方法,每当集合视图中焦点发生变化时调用。它对于实现动态行为(例如根据焦点方向更新标签)非常有用。 |
UIFocusAnimationCoordinator | 该对象在焦点更改时允许平滑的动画,从而在动态更新可访问性元素时增强用户体验。 |
customAccessibilityLabel | 添加到 UICollectionViewCell 子类的自定义属性,用于根据焦点方向存储和管理动态辅助功能标签。 |
context.nextFocusedView | 提供即将获得焦点的 UIView,这对于确定和应用该元素的正确辅助功能标签至关重要。 |
context.previouslyFocusedView | 标识之前具有焦点的 UIView,允许进行上下文感知决策,例如在转移焦点时添加额外的上下文。 |
NotificationCenter.default.addObserver | 注册一个观察者来侦听特定通知,例如 VoiceOver 焦点更改,从而在收到这些通知时启用自定义行为。 |
selector | 指定收到通知时要执行的方法。例如,它允许以定制的方式处理 UIAccessibility.elementFocusedNotification。 |
accessibilityLabel | UIAccessibility 的一个属性,提供描述元素的文本。在示例中覆盖此属性以动态包含其他上下文。 |
使用动态焦点优化辅助功能标签
在第一个脚本示例中,我们使用 UICollectionViewDelegate 协议中的 `didUpdateFocusIn` 方法来跟踪 VoiceOver 焦点何时在元素之间移动。此方法允许开发人员检测先前聚焦的视图和下一个聚焦的视图,使其成为上下文感知调整的理想选择。通过检查下一个聚焦视图是否是 UICollectionViewCell,脚本会使用相关上下文动态更新 accessibilityLabel 属性。例如,当将焦点从顶部标签移动到集合单元格时,我们会附加诸如“有 n 行和 n 列的表,”为依赖辅助技术的用户提供额外的清晰度。🧑💻
第二个脚本采用更广泛的方法,使用 NotificationCenter,侦听“UIAccessibility.elementFocusedNotification”。此通知会在整个应用程序中广播 VoiceOver 焦点的变化。通过处理此通知,脚本动态确定哪个元素具有焦点并相应地更新其 accessibilityLabel。当复杂 UI 中的多个组件需要类似的焦点感知更新时,此方法特别有用。例如,想象一个交互式卡片网格,其中每张卡片根据焦点方向更改其描述 - 这可以使用通知有效地处理。
这两种方法都是模块化且可重用的。第一个脚本与 UICollectionView 紧密集成,使其成为严重基于集合视图的 UI 的理想解决方案。另一方面,基于通知的脚本更加灵活,并且可以在不同的布局中正常工作,例如与标签和按钮相结合的网格。使用“customAccessibilityLabel”等自定义属性可确保对辅助功能文本的更新不会干扰 UI 元素的基本功能。例如,在旅行应用程序中,当焦点转移到目的地卡时,该卡的详细信息可以动态地包括它是否是特色列表或推荐的一部分,从而丰富用户体验。 ✈️
这些实现的关键是确保 accessibilityLabel 简洁且具有描述性。当焦点转移时添加定向上下文可以防止用户在复杂界面中导航时感到困惑。例如,通过指定“单元格 1 表格的顶部标签”,用户可以了解他们在 UI 中的位置以及他们正在交互的结构。这种对辅助功能的深思熟虑的集成不仅符合 WCAG 准则,而且还创造了直观的、以用户为中心的体验。这两种解决方案都确保可访问性仍然是 iOS 应用程序开发中的一等公民。
iOS 中基于焦点方向的动态辅助文本
该解决方案专注于 Swift 编程,利用 UIKit 的辅助功能来根据焦点方向动态调整 UI 元素的辅助功能标签。
// Approach 1: Using Accessibility Focus Delegates
import UIKit
class AccessibleCollectionViewCell: UICollectionViewCell {
override var accessibilityLabel: String? {
get {
return customAccessibilityLabel
}
set {
customAccessibilityLabel = newValue
}
}
private var customAccessibilityLabel: String?
}
class ViewController: UIViewController, UICollectionViewDelegate {
@IBOutlet weak var topLabel: UILabel!
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var bottomLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
}
func collectionView(_ collectionView: UICollectionView,
didUpdateFocusIn context: UICollectionViewFocusUpdateContext,
with coordinator: UIFocusAnimationCoordinator) {
if let nextFocusedCell = context.nextFocusedView as? AccessibleCollectionViewCell {
let direction = context.previouslyFocusedView is UILabel ? "table with n Rows, n Columns" : ""
nextFocusedCell.accessibilityLabel = "\(nextFocusedCell.customAccessibilityLabel ?? ""), \(direction)"
}
}
}
通过通知观察器进行动态焦点调整
此方法使用 Swift 的通知中心来侦听 VoiceOver 焦点更改并动态更新辅助功能标签。
// Approach 2: Using Notification Center
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
private var lastFocusedElement: UIView?
override func viewDidLoad() {
super.viewDidLoad()
NotificationCenter.default.addObserver(self,
selector: #selector(handleFocusChange),
name: UIAccessibility.elementFocusedNotification,
object: nil)
}
@objc private func handleFocusChange(notification: Notification) {
guard let userInfo = notification.userInfo,
let focusedElement = userInfo[UIAccessibility.focusedElementUserInfoKey] as? UIView else { return }
if let cell = focusedElement as? UICollectionViewCell,
lastFocusedElement is UILabel {
cell.accessibilityLabel = "\(cell.accessibilityLabel ?? ""), table with n Rows, n Columns"
}
lastFocusedElement = focusedElement
}
}
创造动态且情境化的无障碍体验
辅助功能是现代应用程序开发的基石,特别是对于像 iOS 这样的平台,VoiceOver 等辅助工具发挥着关键作用。一个微妙但经常被忽视的方面是能够根据导航的焦点方向提供动态上下文。通过实现跟踪焦点是否从上到下移动或反之亦然的逻辑,开发人员可以向元素的可访问性文本添加有意义的细节,从而丰富用户体验。例如,在基于网格的图库应用程序中,当焦点从标题转移到网格时,单元格可以描述其位置和上下文,帮助用户了解其在结构中的位置。 🔍
另一个关键点是,这种动态调整并不局限于UICollectionView。它还可以应用于其他元素,例如 UITableView、堆栈或自定义视图。例如,如果用户导航多节表,当焦点进入或退出该节时,标题可能会添加有关其下方行的上下文。这确保使用 VoiceOver 导航的用户无需额外努力即可获得界面的空间和层次意识,从而提高可用性并符合 WCAG 标准。 🎯
除了基本用例之外,该技术还支持高级交互模式。例如,在教育应用程序中,当测验问题获得焦点时,它可以宣布问题编号、剩余问题总数,甚至有关主题的提示等详细信息。这些细节可以增强依赖辅助技术的用户的参与度并减少认知负担。开发人员必须优先考虑这些动态增强功能,以确保他们的应用程序有效且包容地为不同的受众提供服务。 🌍
有关动态辅助功能标签的常见问题
- 如何检测 VoiceOver 焦点变化?
- 您可以使用 UIAccessibility.elementFocusedNotification 监听焦点的变化。
- 更新辅助功能标签的最佳方法是什么?
- 使用组合 accessibilityLabel 和自定义属性,例如 customAccessibilityLabel,对于动态更新有效。
- 动态标签能否提高非标准 UI 布局的可用性?
- 是的,通过定制网格、表格或自定义视图的描述,您可以让用户更好地理解 UI 结构。
- 上下文感知标签会带来哪些挑战?
- 确保焦点转换的一致性可能很棘手。在不同的导航场景中进行测试至关重要。
- 如何使这些技术可以跨项目重用?
- 创建用于管理焦点感知更新的实用程序或基类是可重用性的有效解决方案。
使用上下文标签增强可访问性
动态辅助功能文本丰富了导航体验,尤其是在网格或集合视图等复杂布局中。通过为焦点转换添加上下文(例如宣布行和列),用户可以更清楚地了解自己在界面中的位置。这种方法确保了更广泛受众的包容性和可用性。
将这些技术应用于现实世界的应用程序(例如教育平台或画廊)可以提升它们的功能。适应用户导航模式体现了深思熟虑的设计。开发人员应从头开始优先考虑可访问性,确保符合 世界煤气协会 标准和制作满足不同用户需求的应用程序。 🌍