Learning Time : 1h 15min
My Github : Accessibility Sandbox Source Code
SwiftUI’s default behavior is to read out the image names as their VoiceOver label, which means anyone using VoiceOver can just move over our three flags to have the system announce which one is correct.
To fix this we need to add text descriptions for each of our flags.
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"
]
var body: some View {
ZStack {
...
VStack {
...
VStack(spacing: 15) {
...
ForEach(0..<3) { number in
Button {
flagTapped(number)
} label: {
FlagImage(countries[number])
.opacity(selectFlag != number ? animationOpacity : 1.0)
.blur(radius: selectFlag != number ? animationRadius : 0.0)
.rotation3DEffect(.degrees(selectFlag == number ? animationAmount : 0), axis: (x: 0, y: 1, z: 0))
.accessibilityLabel(labels[countries[number], default: "Unknow flag"])
}
}
}
...
}
.padding()
}
...
}