OPERATIONS · ACCESSIBILITY ③ · WCAG 2.2 AA
접근성 기준서 v0.1
어떤 수준을, 어느 화면 · 컴포넌트에, 어떻게 검사하나?
운영·법무 ③ (2026-09-06)
어떤 수준을, 어느 화면 · 컴포넌트에, 어떻게 검사하나?
- 목표는 WCAG 2.2 AA 전 항목 + AAA 4개(타깃 44px · 읽기 수준 · 시간 초과 예고 등). 국내 KWCAG 2.2는 이 목표에 포함된다.
- 성공 기준 40여 개를 끼리 규칙 · 해당 화면 · 검사 방법으로 풀었고, 스타일 가이드 컴포넌트 10종에 ARIA 역할 · 키보드 · 리더가 읽는 예를 붙였다.
- 쏠 A안 27개 화면별 우선 검사 항목과 검사 단계(axe 자동 · 키보드 · VoiceOver/TalkBack · 200% · 320px · 모션 · 사용자 파일럿)의 인수 기준을 정했다.
- 목업 · 시안에 대한 실제 접근성 검사는 아직 하지 않았다(§8). 이 문서는 기준이지 검증 결과가 아니다.
누가 읽나: 디자이너 · 프런트 개발자 · QA
스타일 가이드 §11 체크리스트 9줄은 이 문서 §2의 부분집합으로 계속 쓴다.
작성: 페이블 · 2026-09-06 · 운영·법무 산출물 ③
목적: 스타일 가이드 §11의 체크리스트 9줄과 요구사항 NF-01을 검사 가능한 기준으로 넓힌다. 어떤 수준을, 어느 화면 · 컴포넌트에, 어떻게 검사하는지까지 적는다. 이 문서는 기준이며, 실제 화면 적용과 보조기기 검증은 아직 하지 않았다(§8).
목표 수준: WCAG 2.2 AA 전 항목 + 아래 표시한 AAA 4개. 국내 기준 KWCAG 2.2(한국형 웹 콘텐츠 접근성 지침, KS X OT0003)는 WCAG 2.1 AA에 대응하므로 이 목표를 만족하면 함께 만족한다. 근거 번호는 WCAG 2.2 성공 기준(SC) 번호다.
1. 왜 끼리에 접근성이 더 중요한가
- 끼리의 약속은 「말 못 하는 사람의 조건도 똑같이 반영된다」이다. 화면을 못 쓰는 사람이 있으면 그 약속이 처음부터 깨진다.
- 결과 화면은 색으로 상태를 나눈다(보라 = 내 비공개, 청록 = 전원 동의, 녹슨 주황 = 반드시, 앰버 = 기다림). 색만으로 전달하면 색각 이상 사용자에게 「전원 동의」와 「방장 확정」이 같아 보인다.
- 24시간 마감 · 6자리 코드 · 확인 모달 · 순위 선택 등 접근성 실패가 잦은 패턴을 모두 쓴다.
2. 원칙별 기준과 끼리 규칙
2-1. 인식 가능
| SC | 요구 | 끼리 규칙 | 해당 화면 · 컴포넌트 | 검사 |
|---|---|---|---|---|
| 1.1.1 | 비텍스트 대체 | 원탁 · 진행 점 · 배지 아이콘에 텍스트 대체(「6명 중 4명 답함」). 장식 아이콘은 aria-hidden | S2 · S5 · S6 · S7 | axe + 수동 |
| 1.3.1 | 정보와 관계 | 6문항은 fieldset/legend, 선택지는 라디오 또는 aria-pressed 버튼. 결과 표는 table 헤더 | S4-1~S4-6 · S7 | axe |
| 1.3.2 | 의미 있는 순서 | 하단 고정 CTA는 DOM에서도 마지막. 재확인 3버튼은 동의 → 조건부 → 재조율 순 | S4 · S7B | 수동(리더 순서) |
| 1.3.5 | 입력 목적 식별 | 이름 autocomplete="nickname", 입장 코드 autocomplete="one-time-code" inputmode="numeric" | S1 · S3 | 코드 검토 |
| 1.4.1 | 색 사용 | 상태 배지는 아이콘 + 글자 동반(✓ 전원 동의 · 시계 재확인 중 · 중립 「방장 확정」). 상한 조건은 색 + 「꼭 지켜요」 글자 | S7 · S8 · S9 · 결과 카드 | 회색조 캡처 검토 |
| 1.4.3 | 대비 4.5:1 | 스타일 가이드 §3-4의 조합만 사용. 목업 보라 4.48:1은 금지 | 전체 | 빌드 시 대비 계산(가이드 표) |
| 1.4.4 | 200% 확대 | 확대 시 하단 CTA가 본문을 가리지 않음, 가로 스크롤 없음 | S4 · S7 | Playwright zoom 2.0 |
| 1.4.10 | 리플로우 320px | 320px에서 가로 넘침 0(문서 사이트에서 이미 검사 중) | 전체 | Playwright 320 |
| 1.4.11 | 비텍스트 대비 3:1 | 포커스 링 · 입력 테두리 · 3상태 버튼 경계 | 폼 전체 | 대비 계산 |
| 1.4.12 | 텍스트 간격 | 줄 간격 1.5 · 문단 2 · 자간 0.12em 적용 시 잘림 없음 | 결과 카드 · 리포트 | 북마클릿 |
| 1.4.13 | 호버 · 포커스 콘텐츠 | 툴팁은 ESC로 닫히고 포인터로 이동 가능 | 「규칙 설명」 배지 | 수동 |
2-2. 운용 가능
| SC | 요구 | 끼리 규칙 | 해당 화면 · 컴포넌트 | 검사 |
|---|---|---|---|---|
| 2.1.1 / 2.1.2 | 키보드 · 함정 없음 | 모든 행동은 Tab · Enter · Space · 방향키로. 모달은 포커스 가두되 ESC로 탈출 | M1 · M2 · S5H 확인창 · S7C | 키보드만 전 흐름 |
| 2.2.1 | 시간 조절 | 답변 마감은 방장이 정한 활동 시간이라 예외로 보지 않고 대신 리마인드 2회 + 연장 2회(P-04 · P-06)로 대응. 재확인 24시간도 같음. 세션 만료는 재인증 후 입력 유지(E4 · E5) | S5 · S7B · E4 | 시나리오 검토 |
| 2.2.2 | 일시정지 · 정지 | 조율 진행 애니메이션 5초 넘으면 정지 버튼 또는 prefers-reduced-motion에서 정지 이미지 | S6 | 수동 |
| 2.3.1 | 번쩍임 | 초당 3회 이상 번쩍임 없음 | 전체 | 수동 |
| 2.4.1 | 블록 건너뛰기 | 「본문으로」 스킵 링크(문서 사이트 kk-skip 패턴 재사용) | 전체 | axe |
| 2.4.2 | 페이지 제목 | 「S4-2 시간 · 9월 팀 워크숍 · 끼리」처럼 화면 · 방 · 서비스 순 | 전체 | axe |
| 2.4.3 | 포커스 순서 | 화면 전환 후 포커스를 h1 또는 첫 입력으로 이동. 시트 · 모달 닫으면 연 버튼으로 복귀(쏠 M1 · M2 규칙) | 전체 | 수동 |
| 2.4.4 | 링크 목적 | 「더 보기」 금지, 「대안 두 개 더 보기」처럼 대상 명시 | S7 | 수동 |
| 2.4.6 | 제목 · 레이블 | 문항 제목이 곧 legend. 「선호」와 「꼭 지킬 상한」을 레이블로 구분 | S4-2 · S4-5 | axe |
| 2.4.7 | 포커스 가시 | 2px --private-600 링 + 2px 오프셋. 브라우저 기본 링 제거 금지 | 전체 | 수동 |
| 2.4.11 | 포커스 가려짐 없음(2.2 신설) | 하단 고정 CTA · 스티키 헤더가 포커스 요소를 덮지 않게 scroll-padding 지정 | S4 · S7 | Playwright 포커스 위치 측정 |
| 2.5.1 / 2.5.7 | 포인터 제스처 · 드래그 대체(2.2 신설) | 목적 1·2순위는 드래그 정렬 대신 「1순위로」 「2순위로」 버튼 | S4-3 | 코드 검토 |
| 2.5.3 | 이름에 레이블 포함 | 보이는 글자가 접근 가능한 이름의 앞부분 | 버튼 전체 | axe |
| 2.5.8 | 타깃 크기 24px(2.2 신설) | 끼리 기준은 44×44 이상, 선택지 간격 8px 이상(가이드 §11 유지) | 전체 | Playwright 크기 측정 |
| 2.5.5 (AAA) | 타깃 44px | 위와 같음 — 채택 | 전체 | 같음 |
2-3. 이해 가능
| SC | 요구 | 끼리 규칙 | 해당 화면 · 컴포넌트 | 검사 |
|---|---|---|---|---|
| 3.1.1 | 페이지 언어 | <html lang="ko">, 영문 배지(NEXT 등)는 lang="en" | 전체 | axe |
| 3.2.1 / 3.2.2 | 포커스 · 입력 시 맥락 변경 없음 | 선택지를 고르는 순간 다음 문항으로 자동 이동하지 않음. 「다음 질문」 버튼으로만 | S4 | 수동 |
| 3.2.3 / 3.2.4 | 일관된 탐색 · 식별 | 상단 백 · 하단 CTA 위치 고정. 같은 기능은 같은 이름(「내 답변 확인」) | 전체 | 수동 |
| 3.2.6 | 일관된 도움말(2.2 신설) | 문의 창구 링크를 모든 화면 푸터 같은 자리에 | 전체 | 수동 |
| 3.3.1 / 3.3.3 | 오류 식별 · 제안 | 「상한이 선호보다 짧아요. 상한을 하루 이상으로」처럼 필드 옆에 글로. 색만 쓰지 않음. aria-describedby 연결 | S4-2 · S4-5 · S7B | axe + 수동 |
| 3.3.2 | 레이블 · 지시 | 필수 표시는 「(선택)」을 표시하는 방식으로 뒤집음 — Q6만 선택 | S4 | 수동 |
| 3.3.4 | 오류 방지(법적 · 데이터) | 제출 · 재조율 요청 · 확정은 확인 단계(S4R · S7C) 필수, 백키로 취소되지 않음(쏠 백키 규칙) | S4R · S7B · S7C | 시나리오 |
| 3.3.7 | 중복 입력 없음(2.2 신설) | 이전 문항 값은 뒤로 가도 유지(쏠 백키 매트릭스). 재입장 시 서버 상태 복원 | S4 · S5 | Playwright 백키 |
| 3.3.8 | 접근 가능한 인증(2.2 신설) | 6자리 코드는 붙여넣기 · 자동완성 허용, 인지 테스트(캡차) 없음. 개인 링크는 입력 없이 입장 | S3 | 수동 |
| 3.1.5 (AAA) | 읽기 수준 | 스타일 가이드 금지어 표 + 한 문장 20자 안팎 — 채택 | 문구 전체 | 문구 검토 |
2-4. 견고성
| SC | 요구 | 끼리 규칙 | 해당 화면 · 컴포넌트 | 검사 |
|---|---|---|---|---|
| 4.1.2 | 이름 · 역할 · 값 | 3상태 응답 버튼 aria-pressed, 상한 토글 role="switch" aria-checked, 모달 role="dialog" aria-modal aria-labelledby | 폼 · 모달 | axe |
| 4.1.3 | 상태 메시지 | 조율 진행 4단계 aria-live="polite", 저장 실패 · 제출 오류는 role="alert". 「저장됐어요」는 성공 확인 후에만(쏠 E5) | S6 · S4 · E5 | 수동(리더) |
| 2.2.6 (AAA) | 시간 초과 예고 | 세션 · 재확인 마감 임박을 미리 알림 — 채택(리마인드 규칙과 일치) | S5 · S7B | 시나리오 |
3. 컴포넌트별 명세 (스타일 가이드 §8 컴포넌트 10종에 대응)
| 컴포넌트 | 역할 · 속성 | 키보드 | 리더가 읽는 예 |
|---|---|---|---|
| 주 버튼 · 보조 버튼 | button, 비활성은 aria-disabled="true" + 이유 텍스트(disabled 대신, 포커스 유지) | Enter · Space | 「초대방 만들기, 버튼, 사용 불가: 인원을 3명 이상으로」 |
| 3상태 응답(동의 · 조건부 · 재조율) | role="radiogroup" + 라디오 3개, 또는 버튼 3개 aria-pressed | 방향키(라디오) / Tab | 「조건부로 동의해요, 라디오, 3개 중 2, 선택됨」 |
| 상한(거부권) 토글 | role="switch" aria-checked, 레이블 「꼭 지킬 상한」 + 현재 값 | Space | 「꼭 지킬 상한, 스위치, 켜짐, 하루」 |
| 순위 선택(목적 1·2) | 항목마다 「1순위로」 「2순위로」 버튼, 현재 순위 텍스트 | Tab · Enter | 「팀워크, 현재 1순위. 2순위로 바꾸기, 버튼」 |
| 자유서술 입력 | textarea + aria-describedby(도움말 · 글자 수) | 기본 | 「피하고 싶은 것, 선택 사항, 편집 영역, 도움말: 이유는 적지 않아도 돼요」 |
| 구조화 확인 카드 | 카드마다 group + 태그 이름 + 「수정」 「삭제」 버튼 | Tab | 「술 없는 일정, 꼭 지켜요. 수정, 버튼」 |
| 조율 진행 4단계 | ol + 현재 단계 aria-current="step", 컨테이너 aria-live="polite" | — | 「2단계 꼭 지킬 조건 확인, 현재 단계」 |
| 결과 · 후보 카드 | article + h3 후보명, 상태 배지는 텍스트 포함, 점수는 「최저 62 · 평균 78」 숫자 텍스트 | Tab | 「양평 리트릿 워크숍, 추천. 재확인 중. 지켜진 조건 5건」 |
| 내 리포트 행 | ul 항목 + 아이콘 텍스트 대체(「지켜짐」 「선호와 다름」) | — | 「내 시간 상한은 지켜졌어요, 지켜짐」 |
| 모달 · 시트(M1 · M2 · S5H 확인 · S7C) | role="dialog" aria-modal="true" aria-labelledby, 초기 포커스 = 취소, 포커스 가두기, ESC = 닫기, 닫으면 연 버튼으로 복귀 | Tab 순환 · ESC | 「작성 중인 내용이 있어요, 대화상자. 계속 작성하기, 버튼」 |
4. 화면별 우선 검사 항목 (쏠 A안 27개 화면)
| 화면 | 반드시 볼 것 |
|---|---|
| S0 · S1 · S1Q | 제목 · 레이블(2.4.6), 스테퍼 버튼 크기(2.5.8), 오류 문구(3.3.1) |
| S2 · M2 | 공유 시트 포커스 복귀(2.4.3), 복사 실패 대체 텍스트(4.1.3) |
| S3 · E1 · E4 | 코드 입력 자동완성 · 붙여넣기(3.3.8 · 1.3.5), 오류 식별(3.3.1) |
| S4-1~S4-6 · S4R · M1 | fieldset/legend(1.3.1), 자동 이동 금지(3.2.2), 백키 값 유지(3.3.7), 하단 CTA 가림(2.4.11), 드래그 대체(2.5.7) |
| S5 · S5H · E2 | 진행 점 텍스트 대체(1.1.1), 확인창 dialog(4.1.2), 마감 임박 알림(2.2.6) |
| S6 · E3 · E5 | live region(4.1.3), 모션 정지(2.2.2), 오류 재시도 포커스 |
| S7 · S8 · S7B · S7C · S9 | 색 이외 상태 표시(1.4.1), 배지 텍스트(4.1.2), 확정 확인 단계(3.3.4), 리포트 읽기 순서(1.3.2) |
5. 문구 규칙 (이해 가능 원칙의 끼리 적용)
- 한 문장 20자 안팎, 한 문장에 한 가지. 스타일 가이드 금지어 표(「AI가 결정」 「완벽한」 등) 적용.
- 상태는 사람 기준으로: 「전원 동의」는 계산 대상 전원이 명시 동의했을 때만. 「응답자 전원 동의 · 미응답 2명 조건 미반영」처럼 범위를 같이 적는다(결정서 §2).
- 숫자는 단위와 함께 읽히게: 「1인 9만 원」 「하루」 「24시간 남음」.
- 리더 전용 텍스트(
sr-only)로 배지 의미를 보강하되, 보이는 글자와 다른 말을 하지 않는다.
6. 검사 방법과 인수 기준
| 단계 | 도구 | 언제 | 인수 기준 |
|---|---|---|---|
| 자동 | axe-core(Playwright 주입) 27개 화면 × 3폭(1440 · 390 · 320) | 매 빌드 | critical · serious 위반 0 |
| 대비 | 스타일 가이드 §3-4 계산 스크립트 | 토큰 변경 시 | 본문 4.5:1 · UI 3:1 전부 통과 |
| 키보드 | 사람이 마우스 없이 방 만들기 → 답변 → 재확인 → 확정 전 흐름 | 화면 완성 시 · 릴리스마다 | 막히는 곳 0, 포커스 가시 100% |
| 리더 | iOS VoiceOver + Safari, macOS VoiceOver, Android TalkBack + Chrome | 릴리스마다 | §3의 「리더가 읽는 예」와 뜻이 같게 읽힘 |
| 확대 · 리플로우 | 브라우저 200% · 320px · 텍스트 간격 북마클릿 | 릴리스마다 | 가로 넘침 0, 잘림 0 |
| 모션 | prefers-reduced-motion: reduce | 릴리스마다 | 5초 초과 자동 모션 없음 |
| 사용자 | 저시력 · 리더 사용자 각 1명 이상 파일럿(문제 정의 §5 인터뷰와 함께) | 파일럿 단계 | 과업 완료율을 일반 사용자와 비교해 기록(목표치는 측정 후 정함) |
7. 스타일 가이드 §11과의 관계
§11 체크리스트 9줄은 그대로 유효하며 이 문서 §2의 부분집합이다. 새로 더한 것: WCAG 2.2 신설 항목 5개(2.4.11 · 2.5.7 · 2.5.8 · 3.2.6 · 3.3.7 · 3.3.8 중 해당분), 인증(6자리 코드) 규칙, 시간 제한 처리 방침, 컴포넌트별 ARIA 명세, 화면별 우선 검사, 검사 도구와 인수 기준.
8. 아직 하지 않은 것 (정직하게)
- 목업 · 화면설계 시안에 대한 axe · 키보드 · 리더 검사는 하지 않았다. 지금까지 자동 검사는 문서 사이트의 콘솔 오류 · 가로 넘침뿐이다.
- 위 표의 「끼리 규칙」 중 코드로 확인된 것은 목업의 모달
role=dialog·aria-modal·aria-pressed(NF-01)뿐이며 나머지는 설계 기준이다. - 사용자 파일럿의 과업 완료율 목표치는 측정 전이라 적지 않았다.
근거
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation 2023-10-05 — 성공 기준 번호 · 수준
- 한국형 웹 콘텐츠 접근성 지침 2.2 (KWCAG 2.2, KS X OT0003) — 국내 대응 기준
OUTBOX/KKIRI/KKIRI_DESIGN_STYLE_GUIDE.md§3-4 대비 표 · §8 컴포넌트 · §10 금지어 · §11 체크리스트OUTBOX/KKIRI/KKIRI_REQUIREMENTS_AND_POLICY.mdNF-01 · NF-06, P-04 · P-06 · P-09- 쏠 A안 화면설계서 백키 매트릭스 · M1 · M2 · E4 · E5 (
OUTBOX/KKIRI_A_SCREEN_DESIGN_2026_09_06/SCREEN_SPEC.md) OUTBOX/KKIRI/KKIRI_POLICY_DECISIONS_2026_09_06.md§2 (전원 동의 범위 문구)