접근성
접근성이란 장애인이 작업을 인지하고, 조작하며, 이해할 수 있음을 의미합니다. 여기에는 영구적, 일시적, 상황적 장애가 모두 포함됩니다. 대부분의 실패는 아무도 디자인 결정을 내리지 않은 데서 시작됩니다: 포커스 스타일이 그려지지 않음, 오류 상태 없음, 대체 텍스트 없음, 제목 수준 없음. 이 스킬은 이러한 결정들을 체크리스트로 전환합니다.
대비 수학, APCA, 색각 이상에 대한 내용은 color → contrast-and-dark-mode.md에 있습니다. 플랫폼 터치 대상 크기는 media-specs → digital-platforms.md에 있습니다. 고령자, 문해력, 난독증, 문화에 대한 내용은 cognitive-psychology → audience-and-culture.md에 있습니다. 서체 최소 크기는 typography → legibility-by-medium.md에 있습니다.
절대 규칙
- WCAG 2.2 AA를 목표로 함 계약이나 법률에서 다른 버전을 명시하지 않는 한. 이는 2.1 AA 및 2.0 AA도 충족하지만, 2.2에서 제거된 4.1.1 구문 분석은 제외됩니다. 모든 WCAG 요구사항은 [E2]입니다.
- 모든 상태를 디자인하라. 기본, 호버, 포커스, 활성, 선택됨, 비활성화됨, 오류, 로딩, 빈 상태를 두 색상 모드 모두에서 디자인하십시오. 그려지지 않은 상태는 접근성 버그입니다.
- 모든 곳에 보이는 포커스. 하우스 표준: 2px 실선 외곽선, 2px 오프셋, 인접 색상 대비 3:1(AAA 2.4.13 충족). 대체품 없이
outline: none을 절대 사용하지 마십시오. 고정 헤더는 포커스된 항목을 가려서는 안 됩니다(2.4.11). - 타겟 크기 ≥ 24×24 CSS px (2.5.8 AA), 또는 그렇게 간격을 둡니다. 플랫폼 최소 크기는 더 크므로(iOS 44pt, Android 48dp), 터치 UI에서는 이를 사용하십시오.
- 절대 깜빡이지 않으며, 움직임 줄이기를 존중하라. 초당 최대 3회 깜빡임. 5초보다 긴 모든 모션에는 일시 중지 컨트롤을 제공하십시오. 하우스 규칙으로
prefers-reduced-motion을 준수하십시오(2.3.3). - 모든 것은 키보드로; 드래그, 호버 또는 기억력으로만 작동하는 것은 없음. 드래그에 대한 단일 탭 대안(2.5.7). 로그인에 퍼즐이나 전사 없음(3.3.8). 사용자에게 데이터 재입력을 요구하지 마십시오(3.3.7).
- 양식: 보이는 레이블(플레이스홀더는 레이블이 아님), 필드 앞의 지침, 수정 방법을 알려주는 오류 텍스트, 사용자가 필드를 떠날 때까지 기다리는 유효성 검사. 개인 데이터에는
autocomplete토큰을 사용하십시오(1.3.5). - 목적에 따른 텍스트 대안. W3C 대체 텍스트 결정 트리를 따르십시오: 장식 이미지는
alt="", 기능 이미지는 동작 설명, 복잡한 이미지는 긴 설명. 텍스트 이미지 금지. - 맞춤화 전에 보편적 장벽을 먼저 수정하라. 평이한 언어, 예측 가능한 레이아웃, 관대한 양식, 사용자 제어는 인지 장애, 고령자, 저문해력, 제2언어 사용자, 스트레스 사용자에게 동시에 도움이 됩니다 [E2].
- 자동화 도구는 최종 판결이 아니다. 2017년 영국 정부 감사에서 단일 도구는 장벽 유형의 17~41%만 발견했습니다. 수동으로 테스트하고 장애인과 함께 테스트하십시오.
- 법적 참고 사항은 방향 제시일 뿐, 법적 조언이 아니다. 인용하기 전에 날짜를 확인하십시오. 2026년에 여러 날짜가 변경되었습니다.
디자이너의 명세 체크리스트 (인수인계)
- 제목 수준, 랜드마크, 읽기/포커스 순서 주석 처리됨 (주석 키트:
motion-media-and-forms.md§7). - 모든 상호작용 요소: 이름, 역할, 모든 상태, 포커스 스타일, 타겟 크기.
- 모든 이미지: 대체 텍스트 또는 장식 표시. 차트에는 텍스트 또는 표 등가물이 있습니다.
- 모든 양식: 레이블, 도움말 텍스트, 오류 메시지 작성, 필수 필드 표시,
autocomplete명시. - 텍스트, UI 경계, 포커스, 아이콘에 대한 대비가 두 모드 모두에서 확인됨(
color). - 모션: 움직임 줄이기 변형 지정됨. 깜빡임 없음. 긴 모션을 위한 일시 중지 컨트롤.
- 비디오: 자막 및 오디오 설명 또는 대본.
- 레이아웃이 320 CSS px에서 재배치됨. 텍스트는 200% 확대 및 1.4.12 간격 재정의에서도 유지됨(
layout-composition). - 도움말 및 연락처가 일관된 위치에 있음(3.2.6). 기억력 테스트 없는 로그인(3.3.8).
- 모든 카피에 평이한 언어 검토 통과(
inclusive-and-cognitive.md§5).
법률 스냅샷 (2026년 10월 확인, 인용 전 재확인 필요)
| 국가/지역 | 규정 | 표준 | 날짜 |
|---|---|---|---|
| EU | 유럽 접근성법 | EN 301 549: V3.2.1 현재 인용; V4.1.1(WCAG 2.2 AA) 2026년 9월 발행, 관보 게재 대기 중 | 2025년 6월 28일부터 적용 |
| 미국 주/지방 정부 | ADA Title II 규칙 (2024) | WCAG 2.1 AA | 2026년 4월 연장: 2027년 4월 26일(인구 5만 이상), 2028년 4월 26일(소규모, 특별구) |
| 미국 기업 | ADA Title III | 판례법, 일반적으로 WCAG 2.x AA | 소송 주도 |
| 미국 연방 | Section 508 | WCAG 2.0 AA (웹, 문서, 소프트웨어) | 2018년 이후 |
| 영국 공공 부문 | PSBAR 2018 | WCAG 2.2 AA + 접근성 진술 | 시행 중 |
| 캐나다 연방 | 캐나다 접근성법 | CAN/ASC-EN 301 549:2024 | 2040년 목표 |
| 브라질 | LBI art. 63 | ABNT NBR 17225 (2025); eMAG 3.1 (연방) | 시행 중 |
| 일본 | 장애인 차별 금지법 | JIS X 8341-3:2016 | 2024년 4월부터 민간 부문 수용 의무화 |
WCAG 2.2는 ISO/IEC 40500:2025이기도 합니다. WCAG 3는 아직 작업 초안이며 수년이 더 필요합니다.
매체별
| 매체 | 초점 |
|---|---|
| 네이티브 앱 | 1.3.4 방향, 1.4.4 Dynamic Type/글꼴 크기 조정, 2.5.x 포인터 및 타겟, 3.3.x 입력, 4.1.2 이름/역할/값 |
| 웹 | 모든 것. 1.4.10 재배치, 1.4.12 간격, 2.4.11 포커스 미가림이 가장 자주 위반됨. |
| PDF, 슬라이드 | 태그, 제목, 읽기 순서, 대비, 페이지 제목, 언어 |
| 소셜 게시물 | 대체 텍스트 필드, 비디오 자막, 색상만으로 의미 전달 금지, 캡션에 텍스트 반복, 깜빡임 금지 |
| 인쇄, 옥외광고 | WCAG가 직접 적용되지는 않지만, 대비 및 색상 로직은 모범 사례입니다. 거리 규칙은 media-specs에 있습니다. |
참조 파일 — 열어야 할 때
| 파일 | 열어야 할 때 |
|---|---|
references/wcag-22-in-practice.md | 성공 기준 확인 시; 명세서 작성 시; 2.2 추가 사항 상세 확인 시; 채택할 가치가 있는 AAA 기준 확인 시; 매체별 적용 가능성 확인 시. |
references/inclusive-and-cognitive.md | 포용적 디자인 방법, 페르소나 스펙트럼, 인용할 유병률 수치, 상황적 장애, 인지 접근성(COGA), 평이한 언어, 신경다양성 사용자, 지역화/RTL 기초, 포용성 검토 체크리스트. |
references/motion-media-and-forms.md | 모션 및 깜빡임, 움직임 줄이기 코드, 자막/오디오 설명/대본, 대체 텍스트 및 복잡한 이미지, 포커스 및 키보드 사양, 건너뛰기 링크, 양식 및 오류, autocomplete, 터치/포인터, 화면 판독기 주석 및 키트. |
references/legal-and-testing.md | 관할권별 법적 질문, 디자인 목표 표준, 도구 범위, WebAIM Million 2026, 수동 테스트 체크리스트, 장애인 사용자 테스트, Figma 인수인계 체크리스트, 접근성 진술, VPAT/ACR. |