TeamWicked Design System / 기초
접근성·키보드
WCAG 2.2 AA를 목표 기준으로 삼되, 검증되지 않은 준수 주장을 하지 않습니다.
적용 범위: TeamWicked 자체 브랜드·웹사이트. 호스팅 제품의 외형은 포함하지 않습니다. 공통 동작 규칙을 재사용하며, 다른 체계의 사례는 비교 근거일 뿐 스타일 상속이 아닙니다.
목표와 현재 상태
신규·변경 범위의 목표는 WCAG 2.2 AA입니다. 이것은 세 운영 사이트의 인증·준수 선언이 아닙니다. 소스 검사, 자동 검사, 키보드·화면 낭독기 수동 검사, 실제 업무 경로 증거가 별도로 필요합니다.
- A11Y-01 MUST: 모든 기능을 키보드로 조작 가능하게 하고, Tab 순서는 시각적 작업 순서와 맞춥니다. 양수 tabindex로 순서를 수리하지 않습니다.
- A11Y-02 MUST: 포커스를 보이게 하고 고정 UI 뒤에 완전히 가리지 않게 합니다.
- A11Y-03 MUST: 버튼·링크·입력은 가능한 한 네이티브 의미 요소를 사용하고 이름·역할·상태를 제공합니다.
- A11Y-04 MUST: 입력마다 영구 라벨과 필요한 설명을 연결합니다. placeholder는 라벨이 아닙니다.
- A11Y-05 MUST: 오류 필드는 aria-invalid와 해당 오류의 aria-describedby 관계를 제공합니다.
- A11Y-06 MUST: 동적 결과는 문맥에 맞는 status/alert로 알리되 중복 낭독을 줄입니다.
- A11Y-07 MUST: 모달은 초기 포커스·포커스 제한·닫기·복귀를 정의합니다. 문맥이 제거됐다면 논리적인 다음 위치로 복귀합니다.
- A11Y-08 MUST: 드래그에는 클릭/버튼/키보드 대안을 제공합니다.
- A11Y-09 MUST: 로그인에서 붙여넣기·자동완성·비밀번호 관리자를 불필요하게 막지 않습니다.
- A11Y-10 MUST: 확대·reflow·대비·대상 크기 기준은 색상, 레이아웃을 함께 적용합니다.
위젯별 키보드 계약
| 요소 | 기본 조작 |
|---|---|
| 버튼 | Enter / Space |
| 링크 | Enter, 브라우저 기본 동작 유지 |
| 체크박스·스위치 | Space |
| 라디오 | 방향키 이동·선택, 그룹 진입/이탈 Tab |
| 메뉴 | 방향키, Enter, Escape |
| 탭 | 방향키로 탭 이동; 활성화 방식 명시 |
| 모달 | 내부 Tab 순환, 닫기 후 호출 위치 |
| 트리 | 방향키 계층 이동, 펼침/접힘 |
선택한 제품 라이브러리의 실제 동작을 검증하고 다른 위젯 역할을 임의로 혼합하지 않습니다.
체크리스트
키보드만으로 주문·서버 탐색·티켓 작성 초안까지 접근하는 경로를 검토합니다. 실제 결제·고객 기록 생성은 승인된 테스트 환경에 한합니다. NVDA/VoiceOver 중 사용한 도구와 버전을 검증 기록에 남깁니다. 자동 검사 통과가 수동 검사 대체는 아닙니다.
출처와 적용 범위
원본 확인 범위와 운영 적용 여부를 구분합니다. 실행형 예제의 동작 확인은 모든 운영 화면의 접근성 검증을 의미하지 않습니다.
- guidelines/accessibility/overview고정 원문
- guidelines/accessibility/keyboard고정 원문
- guidelines/accessibility/color고정 원문