Project 15, part 3

challenge

1. The check out view in Cupcake Corner uses an image and loading spinner that don’t add anything to the UI, so find a way to make the screenreader not read them out.
2. Fix the list rows in iExpense so they read out the name and value in one single VoiceOver label, and their type in a hint.
3. Do a full accessibility review of Moonshot – what changes do you need to make so that it’s fully accessible?

solution

1. Cupcake Corner check out view의 이미지와 로딩 뷰를 screenreader로부터 빼기(voiceover에서 제외하기)

                AsyncImage(url: URL(string: "https://hws.dev/img/cupcakes@3x.jpg"), scale: 3) { image in
                    image
                        .resizable()
                        .scaledToFit()
                } placeholder: {
                    ProgressView()
                }
                .accessibilityHidden(true)

깃헙 링크

2. iExpense의 각 열의 이름과 값을 VoiceOver label로 설정하고 타입을 hint로 설정하기

                HStack {
                    VStack(alignment: .leading) {
                        Text(expense.name)
                            .font(.headline)
                        Text(expense.type)
                            .font(.subheadline)
                    }
                    Spacer()
                    Text(expense.amount, format: .currency(code: expense.currencyCode))
                        .foregroundStyle(expense.amount < 10 ? .black.opacity(0.3) : (expense.amount < 100 ? .black.opacity(0.6) : .black))
                }
                .accessibilityElement()
                .accessibilityLabel("\(expense.name), \(expense.amount)")
                .accessibilityHint("\(expense.type)")

깃헙 링크

3. Moonshot이 완전 접근 가능하게 하기

사진에서 보이는 미션, 멤버 navigationLink가 버튼 속성이 있고, label은 미션의 이름과 멤버 이름으로 hint는 날짜로 설정했다.

                            .padding([.horizontal, .bottom])
                            .accessibilityElement()
                            .accessibilityLabel(mission.displayName)
                            .accessibilityHint(mission.formattedLaunchDate)
                            .accessibilityAddTraits(.isButton)

trait, label 설정 깃헙 링크
hint 설정 깃헙 링크

❗️ 모든 미션의 이미지를 묘사하여 설명하면 더 좋겠다!!