반응형, 모바일, 모션 접근성

리플로우와 텍스트 간격

Reflow and Text Spacing

리플로우(WCAG 1.4.10, Level AA): 400% 확대 — 320 CSS픽셀 폭 상당 — 에서 두 방향 스크롤 없이 콘텐츠를 이용할 수 있어야 합니다. 저시력 확대 사용자가 한 줄을 읽으려고 좌우로 스크롤을 반복하는 상황을 막는 기준으로, 반응형 설계로 충족합니다. 데이터 테이블·지도처럼 2차원 배치가 본질인 콘텐츠는 예외입니다.

Reflow (WCAG 1.4.10, Level AA): at 400% zoom — equivalent to 320 CSS pixels width — content must be usable without two-dimensional scrolling. It prevents low-vision zoom users from scrolling sideways for every line, and is met through responsive design. Content that is inherently two-dimensional (data tables, maps) is excepted.

텍스트 간격(1.4.12, Level AA): 사용자가 줄 간격 1.5배, 문단 간격 2배, 자간 0.12em, 어간 0.16em으로 키워도 콘텐츠와 기능이 손실되지 않아야 합니다. 고정 높이 컨테이너에 텍스트를 가두면 이 기준에서 잘림이 발생합니다 — 높이는 콘텐츠를 따라가게 설계하세요.

Text Spacing (1.4.12, Level AA): content and functionality must survive user overrides of line height 1.5×, paragraph spacing 2×, letter spacing 0.12em, and word spacing 0.16em. Text locked in fixed-height containers clips under this criterion — let heights follow content.

화면 방향과 모바일 고려

Orientation and Mobile Considerations

화면 방향(1.3.4, Level AA): 세로 또는 가로 방향 하나로 표시를 제한하면 안 됩니다. 휠체어에 기기를 고정한 사용자는 방향을 돌릴 수 없습니다 — '가로로 돌려서 보세요' 안내는 이 기준 위반입니다(은행 수표 촬영처럼 방향이 본질적인 경우 예외).

Orientation (1.3.4, Level AA): display must not be restricted to portrait or landscape alone. A user with a device mounted to a wheelchair cannot rotate it — 'please rotate your device' violates this criterion (excepting essential orientations like check deposit capture).

모바일 특유의 점검 항목: 확대 차단 금지(user-scalable=no, maximum-scale=1 설정 금지), 가상 키보드에 맞는 입력 타입(type="tel", inputmode), 화면낭독기 제스처(TalkBack·VoiceOver 스와이프 탐색)와의 호환, 포커스·호버에 기대는 상호작용의 터치 대안.

Mobile-specific checks: never block zoom (no user-scalable=no or maximum-scale=1), use input types suited to virtual keyboards (type="tel", inputmode), stay compatible with screen reader gestures (TalkBack/VoiceOver swipe navigation), and provide touch alternatives for hover- and focus-dependent interactions.

포인터 제스처, 취소, 타깃 크기

Pointer Gestures, Cancellation, and Target Size

포인터 제스처(2.5.1, Level A): 핀치 줌·두 손가락 스와이프 같은 다중 지점·경로 기반 제스처에는 단일 포인터 대안(+/- 버튼)이 필요합니다. 포인터 취소(2.5.2, Level A): 실행은 눌렀을 때(down)가 아니라 뗄 때(up) 일어나야 잘못 누른 사용자가 밖으로 끌어서 취소할 수 있습니다.

Pointer Gestures (2.5.1, Level A): multipoint and path-based gestures — pinch zoom, two-finger swipes — need single-pointer alternatives (+/- buttons). Pointer Cancellation (2.5.2, Level A): activation should occur on the up-event, not down, so users who mispress can drag away to cancel.

타깃 크기: WCAG 2.2의 2.5.8(Level AA)은 최소 24×24 CSS픽셀(또는 충분한 간격)을, 2.5.5(Level AAA)는 44×44를 요구합니다. 드래그 동작(2.5.7, 2.2 신규 AA)에는 드래그 없는 대안이 필요합니다 — 정렬 리스트라면 위/아래 이동 버튼을 함께 제공합니다.

Target size: WCAG 2.2's 2.5.8 (Level AA) requires at least 24×24 CSS pixels (or sufficient spacing); 2.5.5 (Level AAA) requires 44×44. Dragging Movements (2.5.7, new AA in 2.2) requires a non-drag alternative — a sortable list should also offer move up/down buttons.

모션 민감성과 애니메이션

Motion Sensitivity and Animation

패럴랙스·확대 전환 같은 모션은 전정 장애가 있는 사용자에게 어지럼증과 구역감을 유발할 수 있습니다. CSS 미디어 쿼리 prefers-reduced-motion: reduce를 감지해 장식적 애니메이션을 끄거나 페이드로 대체하는 것이 표준 대응입니다. WCAG 2.3.3(상호작용에서의 애니메이션, Level AAA)이 이를 직접 다룹니다.

Motion like parallax and zoom transitions can trigger dizziness and nausea in users with vestibular disorders. The standard response is honoring the CSS media query prefers-reduced-motion: reduce — disabling decorative animation or replacing it with fades. WCAG 2.3.3 (Animation from Interactions, Level AAA) addresses this directly.

관련 기준: 움직이는 콘텐츠(캐러셀, 자동 스크롤)는 정지·일시정지·숨김 수단이 필요하고(2.2.2, Level A), 기기 흔들기 같은 동작 기반 조작에는 UI 대안과 동작 끄기 옵션이 필요합니다(2.5.4 동작 작동, Level A). 자동 재생 캐러셀은 정지 버튼 없이는 A 수준부터 위반이라는 점이 자주 출제됩니다.

Related criteria: moving content (carousels, auto-scroll) needs pause, stop, or hide controls (2.2.2, Level A), and motion-based operation like shake gestures needs UI alternatives plus a way to disable motion (2.5.4 Motion Actuation, Level A). A frequently tested point: an auto-playing carousel without a pause control fails at Level A.