맞춤형 제어 항목의 접근성 향상하기

맞춤형 제어 항목의 접근성 향상하기

누구나 앱을 이용할 수 있도록 하여 앱에 포함된 인터랙티브 요소의 잠재력을 최대한 실현하세요. VoiceOver 및 기타 보조 기술로 사용자들이 제어 항목을 어떻게 이해하고 사용하는지 자세히 살펴봅니다. 동작, 패스스루 제스처, 직접 터치와 같은 다양한 입력 방법을 알아봅니다. 각각의 접근성 경험을 개선하고 향상해 나가는 과정을 통해 다양한 예시 제어 항목을 자세히 살펴보세요.

챕터
- 0:01 - Introduction
- 1:02 - Guiding principles
- 8:41 - Complex controls
리소스
관련 비디오

WWDC24
- SwiftUI의 손쉬운 사용 관련 업데이트
안녕하세요, 저는 접근성 팀의 소프트웨어 엔지니어 Khin입니다 커스텀 UI 컨트롤은 앱에서 독창적인 작업을 가능하게 합니다 제스처를 사용할 수 있고 표준 컨트롤을 넘어서는 상호 작용도 가능합니다 Apple에서는 기술이 모든 사람에게 도움이 될 때 최고라고 믿습니다 보조 기술을 사용하는 분들께 훌륭한 경험을 제공한다는 의미입니다 VoiceOver, Switch Control 등이 그 예입니다 컨트롤을 접근 가능하게 만들면 모든 사람이 핵심 기능에 접근할 수 있습니다 이 세션에서는 앱의 모든 컨트롤을 접근 가능하게 만드는 방법을 살펴봅니다 먼저 활용할 수 있는 지침 원칙 몇 가지를 설명하겠습니다 그런 다음 복잡한 컨트롤에 이를 적용하는 방법을 보여드리겠습니다 이제 지침 원칙에 대해 이야기해 봅시다 이 슬라이더를 살펴보세요 SwiftUI의 표준 슬라이더입니다 처음 접하는 분이라도 외관만으로도 많은 것을 알 수 있습니다 트랙과 그 위에 핸들이 있습니다 핸들은 트랙의 중간쯤에 있습니다 핸들을 잡을 수 있을 것 같고 드래그로 이동할 수 있습니다 이 시각 정보를 통해 컨트롤에 대한 많은 암시적 단서를 파악합니다 이 컨트롤이 연속적인 값을 나타낸다는 것을 알 수 있습니다 현재 값이 무엇인지도 알 수 있습니다 여기서는 최댓값의 약 절반입니다 값 변경 같은 작업을 위한 제스처도 파악할 수 있습니다 핸들을 드래그할 수 있는 것처럼 보이고, 실제로 드래그하면 즉각적인 피드백이 옵니다 트랙이 채워지고 핸들이 움직이며 무언가 일어났음을 명확히 전달합니다 누구도 설명할 필요가 없었습니다 한눈에 이해됩니다 뇌는 모양, 위치, 예상 동작을 순식간에 처리합니다 시각 정보가 그만큼 강력합니다 화면을 볼 수 없는 사람이라면 어떨까요? 트랙, 핸들, 위치 — 아무것도 알 수 없습니다 모든 사람이 시각 정보에 접근할 수 있는 것은 아닙니다 따라서 다음을 고려해야 합니다 보조 기술 사용자가 이런 컨트롤과 어떻게 상호 작용하는지를요
VoiceOver가 이 슬라이더를 설명하는 방식입니다 VoiceOver는 Apple 플랫폼에 내장된 화면 읽기 프로그램입니다 시각 장애인이나 저시력 사용자가 제스처로 기기와 상호 작용할 수 있게 해줍니다 "밝기, 50%, 조절 가능" "한 손가락으로 위아래로 쓸어서 값을 조절하세요" VoiceOver를 사용하면 슬라이더가 제어하는 것을 이해할 수 있습니다 레이블인 "밝기"를 통해서요 컨트롤에 값이 있으며 현재 50%로 설정되어 있다는 것도 알립니다 취할 수 있는 동작도 명확합니다 조절 가능이라고 읽어 주고 값을 조절하는 방법을 안내합니다 값이 변경되면 새 값을 실시간으로 알립니다 이것이 사용자가 받는 피드백입니다 VoiceOver 사용자는 훌륭한 경험을 할 수 있습니다 컨트롤의 시각적 요소 없이도요
컨트롤의 시각적 형태에서 얻는 정보를 생각해 보세요 이를 지침 원칙으로 활용하여 접근성 경험을 만들어 보세요 컨트롤의 목적을 이해할 수 있도록 해야 합니다 값을 표현한다면 보조 기술에서 그 값을 사용할 수 있게 하세요 취할 수 있는 동작과 피드백 방법을 명확히 하세요 컨트롤을 사용할 때요
또 다른 예시가 있습니다 커피 메이커 앱의 커스텀 컨트롤입니다 가득 채운 한 잔이 필요한 아침이 있고 반만 필요한 아침도 있습니다 알람 소리에 깰지 고양이 울음에 깰지에 달려 있죠 그래서 커피 양을 조절할 수 있는 앱을 만들었습니다 간단한 제스처 하나로요 위로 드래그하면 더 많이 아래로 드래그하면 더 적게요 채움 수준은 추출할 온스를 나타냅니다 현재 이 컨트롤은 추가 정보를 제공하지 않습니다 접근성을 위한 오른쪽으로 쓸어서 컨트롤을 선택해도 VoiceOver는 설명하지 않습니다 값을 변경하는 방법도 알려주지 않습니다 "설정" "버튼"
"6온스" "컵에서 위아래로 드래그하세요" 이 컨트롤과 상호 작용하는 방법이 아직 명확하지 않습니다 하지만 걱정하지 마세요 몇 가지 간단한 단계로 개선할 수 있습니다 앞에서 살펴본 지침 원칙으로 다시 돌아가 보겠습니다 CoffeeDispenserView의 구현 코드입니다 현재는 coffee level을 State로 선언하고 슬라이더에 전달합니다 먼저 슬라이더를 접근성 요소로 표시하겠습니다 목적을 명확히 하기 위해 accessibilityLabel 수정자를 사용합니다 "Coffee Dispenser"라고 지정합니다 그런 다음 accessibilityValue 수정자를 사용하여 현재 채움 수준을 알립니다 VoiceOver에서 커피 슬라이더를 조절할 수 있도록 하고 싶습니다 기본 슬라이더와 동일한 방식으로요 동일한 상호 작용을 이 컨트롤에 추가하겠습니다 .adjustable 트레이트를 추가하는 것부터 시작합니다 이를 통해 VoiceOver에 스와이프로 조절 가능함을 알립니다 각 스와이프의 동작을 정의합니다 .accessibilityAdjustableAction 수정자로요 클로저는 direction 매개변수를 제공합니다 .increment 또는 .decrement입니다 클로저는 각 경우를 처리해야 합니다
이 변경 사항으로 새로운 VoiceOver 경험을 확인합니다 오른쪽으로 쓸어서 컨트롤을 선택한 후 위아래로 쓸어서 원하는 커피 양을 조절합니다 "Coffee dispenser, 6온스, 조절 가능" "한 손가락으로 위아래로 쓸어서 값을 조절하세요"
"7온스" "8온스" "7온스" "6온스" VoiceOver로 1온스씩 커피 양을 조절할 수 있습니다
더 세밀하게 0.5온스 단위로 조절하고 싶다면 어떨까요? 정밀한 제어를 위해 VoiceOver에는 패스스루 제스처라는 기본 기능이 있습니다
패스스루 제스처를 수행하려면 VoiceOver 사용자가 두 번 탭 후 길게 눌러 활성화할 수 있습니다 제스처는 컨트롤의 accessibilityActivationPoint에서 시작합니다 손가락이 움직이면 VoiceOver가 터치 이벤트를 컨트롤에 직접 전달합니다 더 정밀하고 세밀하게 값을 제어할 수 있습니다 커피 슬라이더의 접근성 활성화 포인트는 기본적으로 중앙에 있습니다 현재 채움 수준에 맞게 설정하겠습니다 이렇게 하면 제스처가 항상 커피 수준에서 시작하여 적절한 방향으로 조절할 여지가 생깁니다
패스스루 제스처 중 피드백을 제공하는 것도 중요합니다 이를 위해 접근성 알림을 게시합니다 값이 변경될 때요 하지만 모든 변경마다는 아닙니다 너무 번거로울 수 있거든요 대신 마지막으로 말한 내용과 시점을 추적합니다 값이 실제로 변경되었고 0.3초 이상이 지났다면 알립니다 그렇지 않으면 건너뜁니다 이렇게 하면 VoiceOver 사용자가 의미 있는 업데이트를 들을 수 있습니다
이제 두 번 탭 후 길게 누르고 손가락을 위로 올려 패스스루 제스처를 시도합니다 커피 수준을 9.5온스까지 채워 보겠습니다 "Coffee dispenser, 6온스, 조절 가능" "한 손가락으로 위아래로 쓸어서 값을 조절하세요"
"6... 6.4온스" "6... 6... 7... 7... 7... 8.3온... 8.4온스" "8.5온... 8.6온스" "8.7온스" "8.8온... 9... 9.5온스"
훌륭합니다 컨트롤을 이제 드래그할 수 있으며 의미 있는 업데이트도 제공합니다 이제 경험이 지침 원칙을 충족합니다 앞에서 공유한 레이블, 값, 동작 및 알림 면에서요 기본 커스텀 컨트롤을 살펴봤으니 더 복잡한 예시를 살펴보겠습니다 iOS에서 제가 좋아하는 기능 중 하나입니다 Background Sounds입니다 빗소리나 파도 소리 같은 주변 오디오를 재생해 줍니다 집중하고 휴식을 취하는 데 도움이 됩니다 접근성 설정에서 바로 찾을 수 있습니다 설정 안에는 이퀄라이저 컨트롤이 있습니다 2차원 패드입니다 중앙의 핸들을 표면 어디로나 이동할 수 있습니다 이 패드의 두 차원을 이동하여 사운드 톤을 조절할 수 있습니다 시각적으로 각 축에는 주파수와 진폭 기호가 있습니다 핸들을 잡으면 실제로 두 값의 공간을 동시에 탐색할 수 있습니다 슬라이더의 adjustable 트레이트는 두 가지 동작을 제공합니다 증가와 감소입니다 단일 축에서요 하지만 이 컨트롤에는 두 개의 축이 있습니다 가로와 세로입니다 adjustable 트레이트를 추가하면 한 방향만 처리할 수 있어 이상적인 해결책이 아닙니다 여기서 커스텀 동작이 필요합니다 커스텀 동작으로 컨트롤의 일반적인 동작을 노출할 수 있습니다 각 동작에는 VoiceOver가 크게 읽는 레이블이 있고 활성화 시 실행되는 클로저가 있습니다 adjustable 동작과 달리 커스텀 동작은 정의한 모든 작업을 지원합니다 단일 축에 제한되지 않습니다 이 이퀄라이저 패드에 커스텀 동작을 추가하는 방법입니다 이퀄라이저 패드 뷰에서 accessibilityAction 수정자를 네 번 추가합니다 각 동작에는 설명적인 이름이 있습니다 위로 이동, 오른쪽으로 이동, 아래로 이동, 왼쪽으로 이동입니다 각각은 단일 축을 일정 단계만큼 이동합니다 이 범위 내로 제한됩니다 이 동작들로 공간을 탐색할 수 있습니다 보조 기술을 사용하는 분들에게 이미 익숙한 동작으로요 보조 기술에 의존하는 분들에게요
커스텀 동작으로 이퀄라이저 패드를 사용하는 경험입니다 위아래로 쓸어서 동작을 선택하고 두 번 탭하여 수행합니다 "필터 차트, 주파수 0, 진폭 10" "두 번 탭 후 길게 누르고 드래그하여 필터를 조절하세요" "차트 축 범위는 -100에서 100으로 설정되어 있습니다" "위아래로 쓸어서 커스텀 동작을 선택하세요" "그런 다음 두 번 탭하여 활성화하세요" "아래로 이동" "위로 이동" "오른쪽으로 이동" "왼쪽으로 이동" "오른쪽으로 이동" "위로 이동" "주파수 0, 진폭 20" "주파수 0, 진폭 30" "주파수 0, 진폭 40"
동작을 통해 2D 공간을 탐색하고 사운드 자체가 명확한 피드백을 제공합니다
이퀄라이저 패드는 플랫폼이 어떻게 자체 경험에 각 지침 원칙을 적용하는지 보여주는 좋은 예입니다 이제 제가 작업 중인 앱을 보여드리겠습니다 커스텀 컨트롤이 있는 앱입니다 저처럼 반려동물을 사랑하신다면 직장에 있을 때 정말 보고 싶으실 거예요 낮 시간을 즐겁게 보내기 위해 고양이와 놀 수 있는 앱을 만들었습니다 바로 화면에서요 쓰다듬으면 그루밍 소리를 내고 탭하면 야옹 소리를 냅니다 꼬집으면 고양이니까 바로 쉬익 소리를 냅니다! 진짜와 똑같습니다 아직 이 컨트롤에 접근성 지원을 추가하지 않았습니다 VoiceOver 기본 경험을 확인해 보겠습니다 "Cat fill. Space. 이미지" "고양이를 터치하여 상호 작용하세요" 화면에 이미지만 표시됩니다 쓰다듬기, 탭, 핀치가 이 컨트롤이 지원하는 제스처입니다 하지만 VoiceOver는 이를 알지 못합니다
그 매력, 그루밍 소리, 반죽 행동, 화난 야옹 소리 모두 있습니다 보조 기술을 사용하는 분들과 함께 나눌 준비가 되어 있습니다 VirtualCat은 인터랙티브 고양이 표면을 포함하는 SwiftUI 뷰입니다 컨트롤의 목적을 표현하기 위해 "Virtual Cat"이라고 읽히는 접근성 레이블을 추가합니다 그런 다음 접근성 값을 고양이의 현재 반응으로 설정합니다 VoiceOver에 고양이와 상호 작용하는 제스처를 전달하는 방법이 필요합니다 패스스루 제스처를 사용할 수 있지만 여기에는 최선이 아닐 수 있습니다 예를 들어 이 동작을 반복해서 하고 싶을 수 있고 여러 제스처를 사용하고 싶을 수도 있습니다 따라서 이 컨트롤에는 direct touch를 사용하겠습니다 direct touch API는 화면의 영역을 직접 터치 영역으로 표시합니다 allowsDirectInteraction 트레이트를 추가하면 터치 이벤트가 컨트롤에 바로 전달됩니다 VoiceOver에서 처리되지 않고요 이렇게 하면 컨트롤과 직접 상호 작용할 수 있습니다 지원하는 모든 제스처를 사용할 수 있게 됩니다 direct touch 옵션으로 이 동작을 사용자화할 수 있습니다 첫 번째 옵션은 .requiresActivation입니다 설정하면 컨트롤이 direct touch에 반응하지 않습니다 두 번 탭할 때까지요 이를 통해 화면에서 손가락을 드래그할 수 있습니다 실수로 활성화하지 않고요 패스스루 제스처와 달리 direct touch는 활성 상태를 유지합니다 포커스가 다른 요소로 이동할 때까지요 또 다른 옵션은 .silentOnTouch입니다 설정하면 VoiceOver가 완전히 무음이 됩니다 해당 영역을 터치할 때요 자체 오디오 피드백을 제공하는 컨트롤을 위한 것입니다 VoiceOver 음성이 컨트롤 자체의 오디오를 방해하는 경우에요 이 컨트롤을 인터랙티브하게 만들기 위해 .accessibilityDirectTouch 수정자를 추가합니다 .requiresActivation 옵션으로요
모든 사람이 direct touch 제스처를 수행할 수 있는 것은 아닙니다 가능하면 컨트롤과 상호 작용하는 다른 방법도 제공하세요 예를 들어 커스텀 동작을 사용하세요
VoiceOver로 업데이트된 경험을 확인합니다 두 번 탭하여 direct touch를 활성화하고 고양이를 쓰다듬고 탭하고 꼬집어 보겠습니다
"Virtual cat, 잠자는 중" "활성화하여 direct touch 상호 작용을 시작하세요" "동작 사용 가능"
"Virtual cat" "잠자는 중"
이 변경 사항으로 VoiceOver 사용자가 컨트롤 설명과 direct touch 제스처를 알 수 있습니다 상호 작용에서 피드백도 받습니다 이 앱의 매력적인 모든 것을 보조 기술을 사용하는 분들께 전달합니다
자신만의 커스텀 인터랙티브 컨트롤을 모든 사람이 접근할 수 있게 만드세요 VoiceOver를 켜고 앱을 열어 개선 기회를 찾아보세요 커스텀 컨트롤을 만들 때 사람들이 이해할 수 있는지 생각해 보세요 컨트롤의 목적, 값, 동작, 피드백을요 컨트롤이 제스처에 의존하는 경우 direct touch를 고려하세요 패스스루가 최선이 아닌 경우에요 가능하면 커스텀 동작도 제공하세요 Switch Control, Voice Control을 사용하는 분들도 다른 보조 기술을 사용하는 분들도 동일한 상호 작용에 접근할 수 있습니다 시청해 주셔서 감사합니다

5:01 - Improve accessibility for coffee dispenser

// Improve accessibility for coffee dispenser

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityElement()
            .accessibilityLabel("Coffee Dispenser")
            .accessibilityValue("\(Int(coffee)) ounces")
            .accessibilityAddTraits(.adjustable)
            .accessibilityAdjustableAction { direction in
                switch direction {
                case .increment:
                    increaseCoffeeAmount()
                case .decrement:
                    decreaseCoffeeAmount()
                }
            }
    }
}

7:05 - Set the accessibility activation point

// Set the accessibility activation point
import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0

    var body: some View {
        CoffeeSlider(value: coffee)
            .accessibilityActivationPoint(
                UnitPoint(x: 0.5, y: 1 - coffee)
            )
    }
}

7:27 - Post accessibility announcements

// Post accessibility announcements 

import SwiftUI

struct CoffeeDispenserView: View {
    @State var coffee: Double = 0.0
  
    var body: some View {
        CoffeeSlider(value: coffee)
            // ...
            .onChange(of: coffee) { _, newValue in
                if sufficientTimeSinceLastAnnouncement() && valueHasChanged() {
                    cacheLastSpokenValue(newValue)
                    AccessibilityNotification
                        .Announcement(newValue)
                        .post()
                }
            }
    }
}

10:13 - Add custom actions

// Add custom actions

import SwiftUI
                                                          
struct EqualizerView: View {
    var body: some View {
        EqualizerPad()
            .accessibilityActions("Move Up") {
                increaseY(by: 10)
            }
            .accessibilityActions("Move Right") {
                increaseX(by: 10)
            }
            .accessibilityActions("Move Down") {
                decreaseY(by: 10)
            }
            .accessibilityActions("Move Left") {
                decreaseX(by: 10)
            }
     }
 }

12:47 - Customize accessibility for the interactive cat surface

// Customize accessibility for the interactive cat surface

import SwiftUI

struct VirtualCat: View {
    var cat: CatModel
    var body: some View {
        InteractiveCatSurface()
            .accessibilityLabel("Virtual Cat")
            .accessibilityValue(cat.currentReaction.description)
            .accessibilityDirectTouch([.requiresActivation])
     }
}

- 0:01 - Introduction
- Why custom controls need accessibility support so everyone can use what your app was built to do, and what the session covers — guiding principles and how to apply them to complex controls.
- 1:02 - Guiding principles
- Create accessible custom controls by translating implicit visual cues into explicit information for assistive technologies. Apply labels, values, traits, and actions to ensure these controls are universally understood and actionable by everyone.
- 8:41 - Complex controls
- Complex controls, like multi-dimensional pads and highly interactive virtual surfaces, demand advanced accessibility techniques beyond basic labels and values. Implementing features like passthrough gestures, custom actions, and the Direct Touch API allows people to seamlessly navigate and interact with these interfaces.

시작하기 탐색

알림 받기

플랫폼 탐색

피처링

기술 탐색

피처링

커뮤니티 탐색

피처링

문서 탐색

릴리즈 노트

다운로드 탐색

피처링

지원 탐색

피처링

빠른 링크

챕터

리소스

관련 비디오

WWDC24