Project 15, part 2

Voice input 설정하기

Voice control를 이용할 때 사용자가 더 편하게 다른 옵션으로도 input할 수 있도록 설정할 수 있다.

예시로 "Tap to print message" 버튼이지만, "print", "print message", "tap to print" voice input으로도 동작하게 할 수 있다.

        Button("Tap to print message") {
            print("printing message")
        }
        .accessibilityInputLabels(["print", "print message", "tap to print"])
    }

깃헙 링크

GuessFlags 깃발에 label 달기

각 깃발을 맞추는 게임이니, 버튼을 클릭하면 깃발에 대한 묘사를 VoiceOver로 들을 수 있도록 label을 설정했다.

let labels = [
    "Estonia": "Flag with three horizontal stripes. Top stripe blue, middle stripe black, bottom stripe white.",
    "France": "Flag with three vertical stripes. Left stripe blue, middle stripe white, right stripe red.",
    "Germany": "Flag with three horizontal stripes. Top stripe black, middle stripe red, bottom stripe gold.",
    "Ireland": "Flag with three vertical stripes. Left stripe green, middle stripe white, right stripe orange.",
    "Italy": "Flag with three vertical stripes. Left stripe green, middle stripe white, right stripe red.",
    "Nigeria": "Flag with three vertical stripes. Left stripe green, middle stripe white, right stripe green.",
    "Poland": "Flag with two horizontal stripes. Top stripe white, 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.",
    "Ukraine": "Flag with two horizontal stripes. Top stripe blue, bottom stripe yellow.",
    "US": "Flag with many red and white stripes, with white stars on a blue background in the top-left corner."
]

위는 강의에서 설정한 labels이고, 아래는 직접 설정한 한국어 버전이다.

    let labels = [
        "Estonia": "가로로 세 줄인 깃발. 위에서부터 파랑, 검정, 흰색.",
            "France": "세로로 세 줄인 깃발. 왼쪽부터 파랑, 하양, 빨강색.",
            "Germany": "가로로 세 줄인 깃발. 위에서부터 검정, 빨강, 노랑색.",
            "Ireland": "세로로 세 줄일 깃발. 왼쪽부터 초록, 흰, 주황색.",
            "Italy": "세로로 세 줄인 깃발. 왼쪽부터 초록, 흰, 빨강색.",
            "Nigeria": "세로로 세 줄인 깃발. 왼쪽부터 초록, 흰, 초록색.",
            "Poland": "가로로 두 줄인 깃발. 위에서부터 흰, 빨강색.",
            "Spain": "가로로 세 줄인 깃발. 위에서부터 얇은 빨강 줄 사이, 두꺼운 노랑과 국장.",
            "UK": "파랑색 배경에 흰색과 빨강색 십자가가 겹쳐진 깃발.",
            "Ukraine": "가로로 두 줄인 깃발. 위에서부터 파랑, 노랑색.",
            "US": "빨강색과 흰색의 줄무니가 있고 왼쪽 위는 파랑색 배경에 흰색 별이 있는 깃발."
    ]

그리고 .accessibilityLabel에 해당 label을 적용했다.

                        Button {
                            guessFlag(selectedAnswer: number)
                        } label: {
                            FlagImage(flagName: countries[number])
                        }
                        .accessibilityLabel(labels[countries[number], default: "Unkown flag"])

깃헙 링크

WorldScramble에 hint label 추가하기

label뿐만 아니라 글자 수도 알 수 있게 .accessibilityHint로 설정했다. 버튼에서 기다리면 음성으로 나온다.

                       HStack {
                            Image(systemName: "\(word.count).circle")
                            Text(word)
                        }
                        .accessibilityElement()
                        .accessibilityLabel(word)
                        .accessibilityHint("\(word.count) letters")

깃헙 링크

BookWorm의 RatingView을 조절하기

별 5개의 버튼을 swipe로 값을 조정할 수 있도록 설정했다.

        HStack {
            ForEach(1..<maxRating + 1) { i in
                Button(action: {
                    rating = i
                }, label: {
                    Image(systemName: "star.fill")
                        .foregroundColor(i > rating ? .black.opacity(0.2) : .yellow)
                })
                .buttonStyle(.plain)
            }
        }
        .accessibilityElement()
        .accessibilityLabel("rating")
        .accessibilityValue(rating == 1 ? "1 star": "\(rating) stars")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment:
                if rating < maxRating { rating += 1 }
            case .decrement:
                if rating > 1 { rating -= 1 }
            default:
                print("not handled")
            }
        }

깃헙 링크

VoiceOver로 확인해보니, DetailView의 RatingView는 adjustable이라고 안내는 해주지만 swipe해도 적용이 되지 않는 형태였다.