호스팅 페이지의 접근성
KeenAuth의 호스팅 로그인, 계정 포털, 이메일 페이지는 WCAG 2.2 AA 수준을 충족하도록 설계되어 있습니다. 이는 설계 목표이며 인증이 아닙니다. 자동 테스트를 수행하고 있으며, 이 페이지에서는 현재 다루는 범위와 아직 다루지 않는 범위를 설명합니다.
페이지가 제공하는 기능
- 레이블과 오류. 모든 입력란에는 연결된 보이는
<label>이 있습니다. 오류 메시지는 화면 낭독기에 경고로 전달됩니다. - 키보드. 컨트롤은 기본 폼 요소이며, 포커스는
color.focus_ring색상의 보이는 윤곽선으로 표시됩니다. - 언어와 방향. 페이지에는 선택한 언어의
lang및dir속성이 포함됩니다. 아랍어, 페르시아어, 히브리어는 오른쪽에서 왼쪽으로 배치됩니다. 언어 및 오른쪽에서 왼쪽 쓰기를 참조하십시오. - 작은 화면. 페이지는 가로 스크롤 없이 너비 320px 뷰포트까지 재배치됩니다.
- 밝은 테마와 어두운 테마. 두 테마를 각각 테스트합니다.
- 비밀번호. 호스팅 페이지는 붙여넣기를 막지 않으며, 비밀번호 관리자가 작동하도록 입력란에
autocomplete값을 지정합니다.
테스트 방법
자동화된 테스트 도구가 호스팅 페이지를 열고, 페이지마다 밝은 테마와 어두운 테마, 지원되는 모든 언어(30개), 너비 320px과 1280px에서 다음을 확인합니다.
- WCAG 2.0, 2.1, 2.2 수준 A 및 AA에 대한 axe-core 규칙. 위반 사항은 허용하지 않습니다.
- 가로 스크롤 없음.
- 언어에 필요한 경우 오른쪽에서 왼쪽 방향, 그리고 아랍어에 대한 스크린샷 비교.
- 로그인 페이지의 키보드 전용 경로: Tab으로 식별자 입력란과 계속 버튼에 이동하고, Enter로 제출합니다.
허용된 예외는 사유와 함께 기록되며 90일 이내에 만료됩니다.
아직 다루지 않는 범위
- 계정 포털, 오류 및 로그아웃 페이지, 삽입 가능한 React 컴포넌트는 아직 자동화된 테스트 도구에 포함되어 있지 않습니다.
- 화면 낭독기(NVDA, VoiceOver)를 이용한 수동 테스트는 아직 수행하지 않았습니다.
- 이메일 템플릿은 아직 접근성 점검을 받지 않았습니다.
- 자동 점검으로는 발생 가능한 문제의 일부만 확인할 수 있습니다. 일부 문제는 아직 수정 중입니다.
브랜드 대비 보호
브랜드 색상 때문에 호스팅 페이지를 읽을 수 없게 되는 일은 없습니다. 브랜딩을 저장하면 KeenAuth는 밝은 테마와 어두운 테마 각각에 대해 다음 조합을 확인합니다.
| 조합 | 최소 비율 |
|---|---|
| 배경의 텍스트 | 4.5:1 |
배경의 color.link |
4.5:1 |
color.primary의 color.primary_contrast |
4.5:1 |
| 배경의 컨트롤 테두리 | 3:1 |
| 배경의 포커스 링 | 3:1 |
최소 기준보다 낮은 조합은 422 brand_contrast_insufficient로 거부됩니다. 오류에는 해당 필드가 표시되고, 기준을 통과하는 가장 가까운 색상이 제안됩니다. 제안 색상은 색조와 채도를 유지하고 명도만 조정합니다. 기준을 통과하지 못한 브랜딩은 게시할 수 없습니다. 자세한 내용과 오류 형식은 로그인 페이지 브랜딩에 있습니다.
사용자 지정 CSS(Startup 요금제)는 대비를 낮출 수 있으며, KeenAuth는 이를 자동으로 바로잡지 않습니다. 미리 보기 검사는 문제를 경고로 보고하며, 사용자 지정 CSS로 변경한 내용의 접근성은 사용자 책임입니다.