作为iOSer,如何让自己的项目更有温度?(中)

3,817 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情


上一篇 咱们介绍了如何在Xcode中使用 Accessibility Inspector工具,查看项目中所有元素对 VoiceOver (旁白)功能的支持情况。

本篇,就来看看,出现的警告⚠️,如果去修改

这次咱们就不用自己的demo了,用现成的比较直观。 点击下载链接

首先,咱们看看这个项目,通过审计 (Audit) 功能可以看到,有很多警告

第一个是 Element has no description,

截屏2022-06-02 下午2.54.29.png

就是,这个 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

截屏2022-06-02 下午3.01.32.png

当我们完成上面的设置后,

在看下图

image.png

会有更多的描述,对于视障者来说,极大的提高了使用体验。

第二个是 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)"
}
  1. 将难度label(difficultyLabel) 的isAccessibilityElement设置为可见的,对于大多数 UIKit 类,默认为true,但是 UILabel 的是false

  2. accessibilityTraits帮助标识辅助功能元素的特征。因为这个标签不需要任何交互,所以设置为了none。

  3. 旁白(VoiceOver) 就可以识别出标签的含义了。难度级别(Difficulty Level)可以让用户清楚地知道他们在做的食物是什么难度。

  4. 旁白(VoiceOver) 会把accessibilityValue作为标签描述的一部分念出来。在这里设置好难度等级可以让这个元素变得更有帮助。

这样做就完成了,然后来重新运行一下。

image.png

可以看到,食谱难度,已经可以通过旁白读出来了。

在重新跑一下审计(audit)

发现 potentially inaccessible text 已经没有了

截屏2022-06-02 下午3.43.46.png

第三个 Dynamic text font sizes are unsupported

这个表示动态字体大小不支持,就是说如果用户通过系统放大缩小文字,那么app上的文字不会动态变化。

咱们点击设置(绿色框)

image.png

同样可以看到修改建议

截屏2022-06-02 下午4.05.37.png

可以看到下面有字体大小调节的轨道。

但是按现在的情况,咱们怎么调节,都不会改变app上字体的大小。

所以,接下来,咱们按照建议来修改代码。

dishNameLabel.font = .preferredFont(forTextStyle: .body)
dishNameLabel.adjustsFontForContentSizeCategory = true

difficultyLabel.font = .preferredFont(forTextStyle: .body)
difficultyLabel.adjustsFontForContentSizeCategory = true
  • 咱们把preferredFont设置为body风格,也就是说 系统会把文字显示为文档主体内容的字体风格。具体字号和字体取决于辅助功能设置。
  • adjustsFontForContentSizeCategory表示当用户修改了文本内容的尺寸时,是否自动更新字体。

这样,就完成了修改。

重新Run一下。

看下效果

Jun-02-2022 16-11-20.gif

基本上达到了可以根据设置字体变化而改变显示。只是UI还是差点。

重新看一下审计

截屏2022-06-02 下午4.13.43.png

已经没有了警告。大功告成~~~

下一篇,咱们来说说其他可以改进的小设置。