접근성 — 기초, 시각 장애 사용자를 위한 VoiceOver 및 TalkBack

모바일 앱에서 접근성(a11y)이란?

Accessibility(약어 a11y — 'a'와 'y' 사이 11글자) — 시각, 청각, 운동 및 인지 장애가 있는 사람들이 사용할 수 있는 애플리케이션을 개발하는 방법입니다. 모바일 개발에서 접근성은 네 가지 주요 시나리오를 다룹니다: 시각 장애 사용자(화면 읽기 프로그램), 저시력 사용자(크기 조절, 대비), 청각 장애 사용자(자막, 소리의 시각적 대안), 운동 제어가 제한된 사용자(음성 제어, Switch Control, 큰 터치 영역).

법적 요구사항 — 많은 국가에서 접근성은 법적으로 의무화되어 있습니다. 미국: Section 508 및 ADA. EU: European Accessibility Act(2025). 영국: Equality Act 2010. 접근성 지원이 없으면 앱이 소송 대상이 될 수 있습니다. 2023년 미국에서는 접근할 수 없는 디지털 제품에 대해 4,000건 이상의 소송이 제기되었습니다. Apple과 Google은 앱 심사 중 접근성을 확인합니다: App Store Review Guidelines(4.2) 및 Google Play Store는 최소한의 접근성 지원을 요구합니다.

비즈니스 측면 — 접근성은 사용자층을 확장합니다. Return on Disability(2021)에 따르면 장애인은 연간 13조 달러의 가처분 소득을 통제합니다. 접근성이 좋은 앱은 검색 순위도 높아지고(시맨틱 HTML, 대체 텍스트), 사용자 평점이 높으며 UX 문제에 대한 리뷰가 적습니다. IT Sectr에서는 모든 프로젝트의 완료 조건에 접근성을 포함합니다. 이는 품질 기준이지 선택적 개선 사항이 아닙니다.

iOS 접근성: VoiceOver 및 UIAccessibility

VoiceOver — iOS, iPadOS 및 macOS에 내장된 Apple의 화면 읽기 프로그램. 사용자가 화면에서 손가락을 끌면 VoiceOver가 손가락 아래 요소의 이름을 읽어줍니다. 두 번 탭하면 요소가 활성화됩니다. VoiceOver는 40개 이상의 제스처를 지원합니다: 세 손가락 스와이프(스크롤), 두 손가락 더블 탭(중지), Z 제스처(뒤로 가기). 개발자는 UIAccessibility 프로토콜과 accessibilityLabel, accessibilityTraits, accessibilityHint 속성을 통해 VoiceOver가 읽는 내용과 방식을 제어합니다.

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // accessibilityLabel 재정의
    override var accessibilityLabel: String? {
        get { return "양식 제출 버튼" }
        set {}
    }

    // accessibilityHint 재정의
    override var accessibilityHint: String? {
        get { return "데이터를 제출하려면 두 번 탭하세요." }
        set {}
    }

    // accessibilityTraits 재정의
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — 텍스트 크기 조절
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

동적 타이포그래피 — iOS의 Dynamic Type을 사용하면 사용자가 텍스트 크기(XS에서 XXXL까지)를 선택할 수 있습니다. 개발자는 자동 크기 조절을 위해 UIFontMetrics.scaledFont를 사용합니다. 텍스트는 모든 크기에서 올바르게 표시되어야 합니다: 줄이 잘리지 않아야 하고, 버튼은 텍스트에 비례하여 커져야 합니다. UITableView는 텍스트 크기가 변경될 때 셀 높이를 자동으로 업데이트합니다. Dynamic Type을 무시하면 저시력 사용자가 앱을 사용할 수 없게 만드는 것입니다.

SwiftUI의 접근성

SwiftUI는 접근성 수정자를 제공합니다: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority(). 기본적으로 모든 표준 SwiftUI 요소(Text, Button, Image)는 자동 레이블이 있는 접근성 요소입니다. 사용자 정의 View의 경우 .accessibilityElement(children: .combine)을 사용하여 하위 요소를 하나로 결합합니다. SwiftUI는 Dynamic Type과 VoiceOver를 자동으로 지원합니다.

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("항목 삭제"))
    Text("휴지통")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("선택한 항목을 영구적으로 삭제합니다"))

Android 접근성: TalkBack 및 contentDescription

TalkBack — 대부분의 Android 기기에 사전 설치된 Google의 화면 읽기 프로그램(모든 Android 5+ 버전에서 Google Play에서 사용 가능). TalkBack은 VoiceOver와 동일한 제스처를 사용합니다: 탐색은 스와이프, 활성화는 더블 탭. 개발자는 XML의 android:contentDescription 속성이나 코드의 setContentDescription()을 통해 요소 설명을 설정합니다. ImageView의 경우 contentDescription은 필수입니다. 없으면 TalkBack이 '레이블 없음'이라고 말하거나 파일 이름을 읽습니다.

// XML: ImageView용 contentDescription
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: 프로그래밍 방식 할당
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate(사용자 정의)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "삭제 버튼"
        info.contentDescription = "선택한 항목 삭제"
        info.className = Button::class.java.name
    }
}

// 동적 업데이트를 위한 Live Regions
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — 포커스 없이 콘텐츠 변경을 TalkBack에 알리는 Android의 메커니즘. android:accessibilityLiveRegion 속성은 세 가지 값을 허용합니다: none(알림 없음), polite(현재 읽기 후 알림), assertive(즉시 알림). 로딩 상태 업데이트에는 polite를, 중요한 오류에는 assertive를 사용하세요. assertive를 과도하게 사용하면 사용자에게 혼란을 줍니다. TalkBack이 현재 작업을 계속 중단하게 됩니다.

Accessibility Scanner

Accessibility Scanner — 소스 코드에 접근하지 않고 Android 앱 접근성을 테스트하기 위한 Google의 무료 앱. 스캐너는 다음을 확인합니다: 텍스트 대비, 터치 영역 크기(Android 접근성 가이드라인에 따라 최소 48×48dp), ImageView의 contentDescription, 올바른 요소 계층 구조. 자동화된 테스트를 위해 Espresso의 AccessibilityChecks를 사용하세요. CI/CD에 통합되어 빌드마다 접근성을 확인합니다.

WCAG 2.1: 대비, 크기 및 터치 영역

WCAG 2.1(Web Content Accessibility Guidelines) — W3C가 개발한 국제 접근성 표준. 버전 2.1(2018)은 모바일 애플리케이션을 위한 13가지 추가 기준을 포함합니다. 준수 수준: A(최소), AA(대부분의 조직에 필수), AAA(최대). Apple과 Google은 앱 게시를 위한 최소 기준으로 레벨 AA를 권장합니다. WCAG 2.2는 2023년에 포커스 및 입력에 대한 개선 사항과 함께 출시되었습니다.

주요 기준 모바일 개발: 최소 4.5:1(AA) 또는 7:1(AAA)의 텍스트 대비, 최소 44×44pt(iOS) 또는 48×48dp(Android)의 터치 영역 크기, 기능 손실 없이 가로 및 세로 방향 지원, 애니메이션 비활성화 기능(prefers-reduced-motion), 멀티미디어 자막, 음성 제어(iOS의 Voice Control, Android의 Voice Access)와의 호환성.

대비 확인 도구 — Colour Contrast Analyser(TPGI), WebAIM Contrast Checker, Stark(Figma), Accessibility Inspector(Xcode). IT Sectr에서는 디자인 단계(Figma + Stark)와 개발 단계(Accessibility Inspector / Accessibility Scanner)에서 대비를 확인합니다. 18pt(14pt bold) 미만의 모든 텍스트에 대한 최소 요구사항은 4.5:1입니다. 로고 및 장식 요소에는 대비가 필요하지 않습니다.

접근성 테스트: 도구 및 체크리스트

iOS 테스트 — Xcode의 Accessibility Inspector(Xcode → Open Developer Tool → Accessibility Inspector)는 각 요소의 레이블, traits 및 힌트를 확인합니다. VoiceOver는 설정 또는 접근성 단축키(버튼 세 번 클릭)를 통해 활성화할 수 있습니다. 자동화된 테스트를 위해 XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement)와 함께 XCUITest를 사용하세요. Apple은 VoiceOver를 활성화한 상태에서 모든 앱 화면을 테스트할 것을 권장합니다.

Android 테스트 — Accessibility Scanner(Play Store)는 대비, 터치 영역 크기 및 contentDescription을 확인합니다. 자동화: Espresso AccessibilityChecks(임포트: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'). Google은 다음 체크리스트를 권장합니다: 모든 ImageView에 contentDescription이 있음, 터치 영역이 최소 48×48dp, 텍스트가 잘리지 않고 200%까지 확장됨, 모든 요소가 TalkBack 스와이프로 접근 가능.

IT Sectr 체크리스트 — 출시 전에 다음을 확인합니다: (1) VoiceOver/TalkBack이 모든 요소를 올바르게 읽는지, (2) 텍스트가 기능 손실 없이 최대 크기로 확장되는지, (3) 모든 ImageView에 contentDescription이 있는지, (4) 모든 테마에서 텍스트 대비가 4.5:1 이상인지, (5) 터치 영역이 44pt/48dp 이상인지, (6) 길게 누르기로만 접근 가능한 컨텍스트 메뉴가 없는지, (7) 시스템 설정에서 Reduce Motion / Remove Animations을 지원하는지. 이 체크리스트는 각 스프린트의 완료 조건의 일부입니다.