优化猜国旗项目
在项目2 猜国旗项目中，我们制作了Guess the Flag，它显示了三个标志图片，并要求用户猜测是哪个。好吧，根据您现在对VoiceOver的了解，您可以发现我们游戏中的致命缺陷吗？
没错：SwiftUI的默认行为是读取图像名称作为其VoiceOver标签，这意味着使用VoiceOver的任何人都可以拿到我们的三个国旗的名字，然后选择正确的。
要解决此问题，我们需要为每个标志添加文本描述，并对其进行足够详细的描述，以使了解它们的人可以正确猜出它们，但是当然不必实际给出国家名称。
如果您打开此项目的副本，则会看到它是使用一组国家名称编写的，如下所示：
@State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()
因此，在此处附加标签的最简单方法——不需要我们更改任何代码的方法——就是创建一个字典，以国家/地区名称作为键，将可访问性标签作为值，像这样。请将其添加到ContentView：
let labels = [
"Estonia": "Flag with three horizontal stripes of equal size. Top stripe blue, middle stripe black, bottom stripe white",
"France": "Flag with three vertical stripes of equal size. Left stripe blue, middle stripe white, right stripe red",
"Germany": "Flag with three horizontal stripes of equal size. Top stripe black, middle stripe red, bottom stripe gold",
"Ireland": "Flag with three vertical stripes of equal size. Left stripe green, middle stripe white, right stripe orange",
"Italy": "Flag with three vertical stripes of equal size. Left stripe green, middle stripe white, right stripe red",
"Nigeria": "Flag with three vertical stripes of equal size. Left stripe green, middle stripe white, right stripe green",
"Poland": "Flag with two horizontal stripes of equal size. Top stripe white, bottom stripe red",
"Russia": "Flag with three horizontal stripes of equal size. Top stripe white, middle stripe blue, bottom stripe red",
"Spain": "Flag with three horizontal stripes. Top thin stripe red, middle thick stripe gold with a crest on the left, bottom thin stripe red",
"UK": "Flag with overlapping red and white crosses, both straight and diagonally, on a blue background",
"US": "Flag with red and white stripes of equal size, with white stars on a blue background in the top-left corner"
]
现在我们需要做的就是将accessibility(label:)修饰符添加到标志图像。我意识到这听起来很简单，但是代码必须要做四件事：
- 使用
self.countries [number]获取当前标志的国家/地区名称。 - 使用该名称作为
self.labels的键。 - 如果国家/地区名称在字典中不存在，请提供一个字符串作为默认值。（这永远都不会发生，但是安全无害！）
- 将最终字符串转换为文本视图。
组合这四点在一起，将这个修饰符直接放在标记图像其余修饰符的下面：
.accessibility(label: Text(self.labels[self.countries[number], default: "Unknown flag"]))
现在，如果您再次运行游戏，则无论您是否使用VoiceOver，您都会看到它实际上是一个游戏。这就是无障碍访问的核心：无论访问需求如何，每个人都可以立即玩此游戏。
优化Word Scramble 项目
在项目5中，我们构建了Word Scramble，该游戏向用户提供了一个随机的8个字母的单词，并且不得不使用其字母生成新单词。这通常可以在VoiceOver上很好地发挥作用：应用程序的任何部分都无法访问，尽管这并不意味着我们无法做得更好。
要查看明显的痛点，请尝试添加一个单词。您会看到它滑到提示下方的表格中，但是如果您使用VoiceOver轻敲它，您会发现它的阅读效果不佳：字母计数被读为“五个圆圈”，而文本是一个单独的元素。
有几种方法可以改善此问题，但最好的办法是将这两个项目都设为一个单独的组，让VoiceOver忽略这些内容，然后为整个组添加一个包含更自然描述的标签。
我们当前的代码如下：
List(usedWords, id: \.self) {
Image(systemName: "\($0.count).circle")
Text($0)
}
这依赖于隐式HStack来将图像和文本并排放置。因此，要解决此问题，我们需要创建一个显式的HStack，以便我们可以应用VoiceOver定制。HStack本身接受其内容的闭包，这意味着我们不再可以依赖列表中的$0，因此我们将使用命名参数。
将当前列表替换为：
List(usedWords, id: \.self) { word in
HStack {
Image(systemName: "\(word.count).circle")
Text(word)
}
.accessibilityElement(children: .ignore)
.accessibility(label: Text("\(word), \(word.count) 个字母"))
}
如果您再次尝试游戏，您会看到它现在显示为“ spill，五个字母”，这要好得多。
优化 Bookworm 项目
在项目11中，我们构建了Bookworm，这是一个应用程序，可让用户存储已阅读书籍的评分和描述，我们还引入了一个自定义的RatingView UI组件，该组件显示的星级为1到5。
再说一次，大多数应用程序在VoiceOver上都运行良好，但是评级控制是一个失败的尝试——它使用点击手势来添加功能，因此用户不会意识到它们是按钮，甚至无法传达它们是按钮的事实。应该代表评级。例如，如果我点击其中一个灰色的星标，VoiceOver会向我读出“星标，填充，图像，可能是飞机，星标”的信息——真的没有用。
这本身就是一个问题，但是这又是一个额外的问题，因为我们的RatingView设计为可重用的——这是您可以从该项目中获取的东西，并可以在其他十二个项目中使用，这仅意味着您最终污染了许多应用程序的可访问性。
我们可以使用三个修饰符来解决此问题，每个修饰符都添加到RatingView中当前的tapGesture()修饰符下方。首先，我们需要添加一个为每颗星星提供有意义的标签，如下所示：
.accessibility(label: Text("\(number == 1 ? "1 star" : "\(number) stars")"))
其次，我们可以删除.isImage特征，因为这些是图像并不重要：
.accessibility(removeTraits: .isImage)
最后，我们应该告诉系统每个星星实际上都是一个按钮，以便用户知道可以点击它。当我们在这里时，对于已经高亮的星星，则可以通过添加第二个特征.isSelected来使VoiceOver的工作做得更好。
因此，在最后两个下面添加最终修饰符：
.accessibility(addTraits: number > self.rating ? .isButton : [.isButton, .isSelected])
仅进行了三个小更改，但是此改进的组件比我们以前拥有的要好得多。
译自
Fixing Guess the Flag
Fixing Word Scramble
Fixing Bookworm
网友评论