# 접근성을 기본값으로 내장하기

> ARIA 표준화·키보드 패턴·WCAG 대비·자동화 한계

- Canonical: https://learning.reopt.ai/courses/design-systems/lessons/ds-l2-a11y
- Language: ko-KR
- HTML: https://learning.reopt.ai/courses/design-systems/lessons/ds-l2-a11y

---

[AI 시대의 디자인 시스템](/courses/design-systems) 2. 컴포넌트 명세 & 접근성 5 / 15

# 접근성을 기본값으로 내장하기

ARIA 표준화·키보드 패턴·WCAG 대비·자동화 한계
개념 학습 34 XP 7분

접근성은 선택이 아닌 기본값 입니다. AI가 만드는 모든 컴포넌트가 접근성을 갖추려면 Primitive → Component → Pattern → Page 계층에 ARIA 패턴을 미리 박아 둬야 합니다.

## ARIA 표준화

- Role 매핑 — 컴포넌트마다 적절한 role 자동 적용 (Button→button, Dialog→dialog)
- 상태 속성 — aria-expanded · aria-selected · aria-checked · aria-disabled · aria-pressed
- 관계 속성 — aria-labelledby · aria-describedby · aria-controls · aria-errormessage
- Live Region — aria-live="polite" (일반 알림) / assertive (긴급 알림)

## 표준 키보드 패턴

| 키 | 동작 | 적용 예 |
| Tab / Shift+Tab | 포커스 이동 / 역방향 | 모든 인터랙티브 요소 |
| Enter / Space | 활성화 | Button, Menu 선택 |
| Escape | 취소 / 닫기 | Dialog, Popup |
| 방향키 (↑↓ / ←→) | 리스트 탐색 / 탭·슬라이더 | Menu, Tabs, Slider |

## 색상 대비 (WCAG)

| 수준 | 일반 텍스트 | 대형 텍스트 | UI 컴포넌트 |
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | - |

대형 텍스트 기준 18px 이상 또는 14px Bold 이상. 전경-배경 페어링과 자동 대비 검사 스크립트로 AA를 보장하세요.
자동화의 현재 한계 AI 접근성 도구는 웹 이슈의 약 60% , 모바일 이슈의 30% 미만 만 감지합니다. 인지 접근성·실제 보조 기술 호환성은 여전히 수동 테스트가 필수이며, AI 도구는 전문가 리뷰를 보조 하는 역할입니다.
접근성 검증 방식 자동 (CI 게이트)

- axe-core 유닛 테스트
- Playwright AxeBuilder (wcag2aa)
- 토큰 대비 검사 스크립트

수동 (여전히 필수)

- NVDA·VoiceOver 스크린리더
- 키보드 전용 조작
- 인지 접근성 판단

핵심 정리

- 접근성은 Primitive→Component→Pattern→Page 계층에 기본값으로 내장한다
- role·aria 상태/관계 속성·표준 키보드 패턴을 코드로 표준화한다
- 일반 텍스트 대비는 AA 4.5:1, 대형 텍스트·UI 컴포넌트는 3:1이 최소 기준이다
- AI 도구는 웹 60%·모바일 30% 미만만 감지하므로 수동 테스트를 병행한다

[이전](/courses/design-systems/lessons/ds-l2-spec) 이해했어요 · 계속

---

에이전트용 사이트 안내: https://learning.reopt.ai/llms.txt · 사이트맵: https://learning.reopt.ai/sitemap.xml · 문의: https://learning.reopt.ai/contact