접근성
마우스 없이, 완벽한 시력 없이, 모호함을 참을 인내심 없이도 인터페이스를 사용할 수 있게 만드세요.
사용 시기
다음과 같은 경우에 사용하세요:
- 사용자가 접근성 검토를 원할 때;
- 폼, 내비게이션, 모달 또는 대화형 컴포넌트를 구축 중일 때;
- WCAG 지침이 필요할 때;
- 키보드 또는 스크린 리더 지원이 필요할 때;
- 명암 또는 포커스 상태에 대해 물을 때.
1. 범위 정의
- 어떤 페이지 또는 컴포넌트?
- 어떤 사용자 그룹과 보조 기술이 중요한가?
- 어떤 표준이 적용되는가: WCAG 2.2 AA, 내부 정책, 법적 요구사항?
- 범위 밖의 것은 무엇인가?
2. 기본 사항 확인
시맨틱
- 네이티브 요소 사용:
button,a,input,label,nav,main. div를 버튼으로 사용하지 마세요.- 제목을 순서대로 사용하세요.
- 랜드마크와 섹션에 접근 가능한 이름을 부여하세요.
키보드
- 모든 대화형 요소는 Tab으로 접근 가능해야 합니다.
- 포커스 순서는 시각적 순서와 일치해야 합니다.
- 포커스가 시각적으로 표시되어야 합니다.
- 키보드 트랩이 없어야 합니다.
- Escape 키로 모달을 닫을 수 있어야 합니다.
- 메뉴, 탭, 그리드에서 예상된 위치에 화살표 키가 작동해야 합니다.
폼
- 모든 입력에는 레이블이 있어야 합니다.
- 오류가 알려지고 해당 필드와 연결되어야 합니다.
- 필수 필드는 색상뿐만 아니라 텍스트로 표시되어야 합니다.
- 적절한 곳에 자동 완성이 사용되어야 합니다.
- 지침은 필드 앞에 와야 합니다.
이미지 및 미디어
- 의미 있는 이미지에는 alt 텍스트가 있어야 합니다.
- 장식용 이미지에는 빈 alt가 있어야 합니다.
- 비디오에는 자막이 있어야 합니다.
- 오디오에는 대본이 있어야 합니다.
- 색상으로만 전달되는 정보가 없어야 합니다.
명암비 및 텍스트
- 텍스트 명암비가 WCAG AA를 충족해야 합니다.
- 텍스트를 200%까지 크기 조정할 수 있어야 하며 내용 손실이 없어야 합니다.
- 줄 길이와 간격이 읽기 쉬워야 합니다.
- 320px 너비에서 콘텐츠가 재배치되어야 합니다.
동적 콘텐츠
- 로딩 상태가 알려져야 합니다.
- 토스트와 알림은 적절한 live region을 사용해야 합니다.
- 모달은 포커스를 관리해야 합니다.
- 클라이언트 측 경로 변경 시 제목과 포커스가 업데이트되어야 합니다.
3. 테스트
- 키보드 전용 탐색.
- 스크린 리더 스모크 테스트(가능한 경우).
- 200% 확대.
- 고대비 모드.
- 동작 줄이기.
- 자동화된 검사(문제의 일부만 잡을 수 있음을 인지).
출력 형식
## 범위
## 발견 사항
### <심각도>: <문제>
- **위치:** `<경로 또는 컴포넌트>`
- **WCAG:** <기준>
- **영향:** <차단된 사용자와 그 방식>
- **수정:** <구체적인 변경>
- **검증:** <테스트 방법>
## 잘 작동하는 부분
## 테스트되지 않은 부분
## 우선순위
1. ...
규칙
- 자동화된 스캔만으로 완전한 WCAG 준수를 주장하지 마세요.
- 잘못된 시맨틱을 고치기 위해
aria-*를 사용하지 마세요. - 시각적 대체 수단 없이 포커스 아웃라인을 제거하지 마세요.
- 색상에만 의존하지 마세요.
- 레이블 대신 스크린 리더 전용 클래스를 추가하지 마세요.
- 검토가 부분적이라면 테스트되지 않은 부분을 명시하세요.
품질 검사
- 네이티브 시맨틱이 사용됨.
- 키보드 접근이 작동함.
- 포커스가 시각적으로 표시됨.
- 폼에 레이블과 오류가 있음.
- 명암비가 충분함.
- 동적 콘텐츠가 알려짐.
- 검토에서 테스트되지 않은 부분이 명시됨.