持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情
上一篇,咱们将到了如何修改食品列表,让它变的更好用。
这一篇,咱们就来继续看,食品详情中,有什么可以改进的。
点击下载链接
食品详情界面
咱们可以看到,这个界面就有很多其他的控件了,
咱们先来修改一下返回按钮
返回按钮
在旁白中 返回按钮读出来的是这个样子的
会让视障者很难去理解 <- 是什么意思。
所以咱们来修改一下。
打开 RecipeInstructionsViewController.swift 并在viewDidLoad中的assert(recipe != nil)后面添加下面的代码:
backButton.accessibilityLabel = "返回"
backButton.accessibilityTraits = .button
重新看一下旁白,会怎么读
可以看到,旁白已经将我们想要告诉使用者的信息已经读了出来。
带emoji的按钮
使用旁白读出来的是 『心型眼的表情和困惑的表情』,这样很难不产生疑惑,所以我们还是来看如何修改代码。
还是这个文件中,用下面的代码替换掉isLikedFood(_:)中的内容:
if liked {
likeButton.setTitle("😍", for: .normal)
likeButton.accessibilityLabel = "Like"
likeButton.accessibilityTraits = .button
didLikeFood = true
} else {
likeButton.setTitle("😖", for: .normal)
likeButton.accessibilityLabel = "Dislike"
likeButton.accessibilityTraits = .button
didLikeFood = false
}
重新运行,来看看效果。
可以看到,旁白已经可以将这个带emoji的按钮读出来,并准确的表达其含义了。
复选框
先看改进前的
对于每个复选框,VoiceOver 现在会念出 icon empty 然后念出食谱的制作方法。这一点都不清晰。所以,咱们来改进一下。
打开 InstructionCell.swift 然后找到shouldStrikeThroughText(_:)。把if strikeThrough代码块的所有内容替换为下列内容:
// 1
checkmarkButton.isAccessibilityElement = false
if strikeThrough {
// 2
descriptionLabel.accessibilityLabel = "完成: \(text)"
attributeString.addAttribute(
NSAttributedString.Key.strikethroughStyle,
value: 2,
range: NSRange(text.startIndex..., in: text))
} else {
// 3
descriptionLabel.accessibilityLabel = "未完成: \(text)"
}
-
先把复选框的辅助功能关掉,旁白就可以把复选框和后面的文字当成一个整体,不然就要分开两个读
-
现在将
descriptionLabel的accessibilityLabel描述信息使用硬编码的完成后,接上制作方法文本。这样就把一个带复选框状态和标签内容的所有必要的信息都提供出来了。 -
和其他代码一样,如果用户把一个条目标记为未完成,就在标签描述前面增加
未完成。
好了,咱们来看看效果
这样,可以看见旁白就将是否完成对应的功能已经全部读出来。是不是很奇妙。
结语
以上就是Accessibility(辅助功能)-- VoiceOver(旁白)在项目上的简单使用,全篇读下来,你可以发现,很多看上去很麻烦的功能,其实有时只需要加上一两句简单的代码就可以了。
如果有时间,可以考虑加上这个功能,让你的项目更加温暖。