모바일 웹과 터치 환경

모바일 화면낭독기의 동작 방식

모바일 기기에는 운영체제에 화면낭독기가 내장되어 있습니다. iOS·iPadOS는 VoiceOver, Android는 TalkBack(제조사에 따라 삼성 기기는 TalkBack 기반의 음성 지원)이 기본입니다. 웹 페이지는 iOS에서는 Safari 등 WebKit 엔진, Android에서는 주로 Chrome이 접근성 트리를 만들어 화면낭독기에 전달합니다.

데스크톱과 가장 큰 차이는 조작 방식입니다.

• 스와이프 탐색: 오른쪽·왼쪽으로 쓸어 넘기면 다음·이전 요소로 이동합니다. 데스크톱의 화살표·Tab 이동에 해당합니다.
• 터치 탐색: 손가락이 닿은 위치의 요소를 읽습니다. 그래서 화면에 보이는 위치와 접근성 트리의 요소 크기가 일치해야 합니다.
• 두 번 탭으로 현재 요소를 실행합니다. 이때 브라우저는 일반적으로 click 이벤트를 보냅니다. keydown 이벤트는 오지 않습니다.
• 단위 이동: VoiceOver는 로터, TalkBack은 읽기 컨트롤(읽기 옵션)로 제목·링크·컨트롤 등 단위를 고른 뒤 위·아래 스와이프로 이동합니다. 제목 구조가 데스크톱만큼 중요합니다(랜드마크와 제목 구조).

VoiceOver와 TalkBack의 지원 차이

두 화면낭독기 모두 WAI-ARIA를 지원하지만, 세부 동작은 운영체제·브라우저·버전에 따라 다릅니다. 아래는 흔히 차이가 나는 부분입니다. 실제 지원 여부는 대상 기기에서 직접 확인해야 합니다.

터치 제스처의 대안 (WCAG 2.5.x)

터치 환경의 복잡한 제스처는 운동 장애가 있는 사용자, 한 손이나 스타일러스·헤드 포인터를 쓰는 사용자, 화면낭독기 사용자가 수행하기 어렵습니다. WCAG 2.2 지침 2.5(입력 방식)는 다음을 요구합니다.

<div class="slides" ontouchmove="handleSwipe(event)">
  ...
</div>

<section aria-roledescription="캐러셀" aria-label="이벤트">
  <button type="button" aria-label="이전 슬라이드">‹</button>
  <button type="button" aria-label="다음 슬라이드">›</button>
  <div class="slides">...</div>
</section>

<li draggable="true">장바구니 상품 A</li>

<li>
  장바구니 상품 A
  <button type="button" aria-label="상품 A 위로 이동">▲</button>
  <button type="button" aria-label="상품 A 아래로 이동">▼</button>
</li>

캐러셀의 전체 구조는 캐러셀 패턴, 슬라이더는 슬라이더 패턴을 참고하세요.

터치 대상 크기

작은 버튼은 손 떨림이 있거나 손가락이 굵은 사용자, 움직이는 차 안에서 쓰는 사용자 모두에게 누르기 어렵습니다.

• 2.5.8 대상 크기(최소)(AA, WCAG 2.2 신규): 포인터 대상은 최소 24×24 CSS 픽셀이어야 합니다. 더 작다면, 각 대상의 중심에 지름 24px 원을 그렸을 때 이웃 대상(이나 그 원)과 겹치지 않을 만큼 간격을 두어야 합니다. 문장 속 링크, 브라우저 기본 컨트롤, 크기가 법적·본질적으로 정해진 경우, 같은 기능을 하는 충분히 큰 다른 컨트롤이 있는 경우는 예외입니다.
• 2.5.5 대상 크기(향상)(AAA): 최소 44×44 CSS 픽셀을 요구합니다. Apple Human Interface Guidelines의 44×44pt, Android Material Design의 48×48dp 권장과 비슷한 수준이므로 실무 목표로 삼기 좋습니다.

/* 아이콘은 작아도 누를 수 있는 영역은 넉넉하게 */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg { width: 20px; height: 20px; }

화면 방향

WCAG 1.3.4 화면 방향(AA)은 콘텐츠를 세로 또는 가로 한 방향으로만 볼 수 있게 제한하지 않도록 요구합니다. 휠체어 등에 기기를 고정해 쓰는 사용자는 기기를 돌릴 수 없습니다. 피아노 앱, 수표 촬영처럼 특정 방향이 본질적인 경우만 예외입니다.

@media (orientation: landscape) {
  .app { display: none; }
  .rotate-msg { display: block; }  /* "세로로 돌려 주세요" */
}

@media (orientation: landscape) {
  .app { flex-direction: row; }   /* 배치만 바꿈 */
}

네이티브 앱 API와 ARIA 개념 대응

하이브리드 앱이나 웹·앱을 함께 만드는 팀은 ARIA 개념이 네이티브 플랫폼에서 어떻게 표현되는지 알아 두면 좋습니다. 개념은 같지만(이름·역할·상태·값), API 이름과 세부 동작은 다릅니다. 아래는 대표적인 대응이며 완전히 같은 의미는 아닙니다.

// Jetpack Compose: 즐겨찾기 토글 아이콘
IconToggleButton(
  checked = isFav,
  onCheckedChange = { isFav = it },
  modifier = Modifier.semantics {
    stateDescription = if (isFav) "추가됨" else "추가 안 됨"
  }
) {
  Icon(Icons.Default.Star, contentDescription = "즐겨찾기")
}

// SwiftUI: 같은 기능
Button(action: { isFav.toggle() }) {
  Image(systemName: isFav ? "star.fill" : "star")
}
.accessibilityLabel("즐겨찾기")
.accessibilityValue(isFav ? "추가됨" : "추가 안 됨")

모바일 점검 체크리스트

• VoiceOver와 TalkBack에서 스와이프만으로 모든 콘텐츠와 컨트롤에 순서대로 도달하는지 확인합니다.
• 두 번 탭으로 모든 버튼·링크·커스텀 위젯이 실행되는지 확인합니다(keydown에만 의존하지 않는지).
• 로터·읽기 컨트롤의 제목 이동으로 페이지 구조가 파악되는지 확인합니다.
• 스와이프·핀치·드래그·흔들기로 하는 기능에 버튼 같은 대안이 있는지 확인합니다.
• 터치 대상이 24×24 CSS 픽셀 이상(권장 44×44)이거나 충분한 간격이 있는지 확인합니다.
• 세로·가로 방향 모두에서 콘텐츠를 쓸 수 있고, 확대가 막혀 있지 않은지 확인합니다.
• 대화상자가 열렸을 때 스와이프로 배경 콘텐츠에 가지 않는지 확인합니다.