持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情
上一篇 咱们介绍了如何在Xcode中使用 Accessibility Inspector
工具,查看项目中所有元素对 VoiceOver (旁白)功能的支持情况。
本篇,就来看看,出现的警告⚠️,如果去修改
这次咱们就不用自己的demo了,用现成的比较直观。 点击下载链接
首先,咱们看看这个项目,通过审计 (Audit) 功能可以看到,有很多警告
第一个是 Element has no description
,
就是,这个 image view 没有辅助功能标签,
那咱们就来给这个图片加上 辅助功能标签。
首先写一个函数
// MARK: Accessibility
extension RecipeCell {
func applyAccessibility(_ recipe: Recipe) {
// 1
foodImageView.accessibilityTraits = .image
// 2
foodImageView.accessibilityLabel = recipe.photoDescription
}
}
复制代码
然后在赋值的时候,将recipe 传进去
applyAccessibility(recipe)
复制代码
- 这里的
accessibilityTraits
表示 告诉旁白,这个imageView 是imag - 这里的
accessibilityLabel
表示,旁白会通过这个值去描述这个物体。这里我们把他设置成了recipe.photoDescription,就是一个图片的内容描述。
先看之前的,当用户点击到图像时,旁白会提示--- image
当我们完成上面的设置后,
在看下图
会有更多的描述,对于视障者来说,极大的提高了使用体验。
第二个是 potentially inaccessible text
这个意思是 可能无法访问的文本。就是说,这个东西可能是图片,也可能是表情包,这样对视障者是不可见的。
那怎么修复这个呢?
applyAccessibility(_:)
方法的最后增加下面的代码:
// 1
difficultyLabel.isAccessibilityElement = true
// 2
difficultyLabel.accessibilityTraits = .none
// 3
difficultyLabel.accessibilityLabel = "Difficulty Level"
// 4
switch recipe.difficulty {
case .unknown:
difficultyLabel.accessibilityValue = "Unknown"
case .rating(let value):
difficultyLabel.accessibilityValue = "(value)"
}
复制代码
-
将难度label(
difficultyLabel
) 的isAccessibilityElement
设置为可见的,对于大多数 UIKit 类,默认为true
,但是 UILabel 的是false
。 -
accessibilityTraits
帮助标识辅助功能元素的特征。因为这个标签不需要任何交互,所以设置为了none。 -
旁白(VoiceOver) 就可以识别出标签的含义了。难度级别(
Difficulty Level
)可以让用户清楚地知道他们在做的食物是什么难度。 -
旁白(VoiceOver) 会把
accessibilityValue
作为标签描述的一部分念出来。在这里设置好难度等级可以让这个元素变得更有帮助。
这样做就完成了,然后来重新运行一下。
可以看到,食谱难度,已经可以通过旁白读出来了。
在重新跑一下审计(audit)
发现 potentially inaccessible text
已经没有了
第三个 Dynamic text font sizes are unsupported
这个表示动态字体大小不支持,就是说如果用户通过系统放大缩小文字,那么app上的文字不会动态变化。
咱们点击设置(绿色框)
同样可以看到修改建议
可以看到下面有字体大小调节的轨道。
但是按现在的情况,咱们怎么调节,都不会改变app上字体的大小。
所以,接下来,咱们按照建议来修改代码。
dishNameLabel.font = .preferredFont(forTextStyle: .body)
dishNameLabel.adjustsFontForContentSizeCategory = true
difficultyLabel.font = .preferredFont(forTextStyle: .body)
difficultyLabel.adjustsFontForContentSizeCategory = true
复制代码
- 咱们把
preferredFont
设置为body
风格,也就是说 系统会把文字显示为文档主体内容的字体风格。具体字号和字体取决于辅助功能设置。 adjustsFontForContentSizeCategory
表示当用户修改了文本内容的尺寸时,是否自动更新字体。
这样,就完成了修改。
重新Run一下。
看下效果
基本上达到了可以根据设置字体变化而改变显示。只是UI还是差点。
重新看一下审计
已经没有了警告。大功告成~~~
下一篇,咱们来说说其他可以改进的小设置。