# 호스팅 페이지의 접근성

KeenAuth의 호스팅 로그인, 계정 포털, 이메일 페이지는 WCAG 2.2 AA 수준을 충족하도록 설계되어 있습니다. 이는 설계 목표이며 인증이 아닙니다. 자동 테스트를 수행하고 있으며, 이 페이지에서는 현재 다루는 범위와 아직 다루지 않는 범위를 설명합니다.

## 페이지가 제공하는 기능

- **레이블과 오류.** 모든 입력란에는 연결된 보이는 `<label>`이 있습니다. 오류 메시지는 화면 낭독기에 경고로 전달됩니다.
- **키보드.** 컨트롤은 기본 폼 요소이며, 포커스는 `color.focus_ring` 색상의 보이는 윤곽선으로 표시됩니다.
- **언어와 방향.** 페이지에는 선택한 언어의 `lang` 및 `dir` 속성이 포함됩니다. 아랍어, 페르시아어, 히브리어는 오른쪽에서 왼쪽으로 배치됩니다. [언어 및 오른쪽에서 왼쪽 쓰기](/docs/guides/localization)를 참조하십시오.
- **작은 화면.** 페이지는 가로 스크롤 없이 너비 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`로 거부됩니다. 오류에는 해당 필드가 표시되고, 기준을 통과하는 가장 가까운 색상이 제안됩니다. 제안 색상은 색조와 채도를 유지하고 명도만 조정합니다. 기준을 통과하지 못한 브랜딩은 게시할 수 없습니다. 자세한 내용과 오류 형식은 [로그인 페이지 브랜딩](/docs/guides/branding)에 있습니다.

사용자 지정 CSS(Startup 요금제)는 대비를 낮출 수 있으며, KeenAuth는 이를 자동으로 바로잡지 않습니다. 미리 보기 검사는 문제를 경고로 보고하며, 사용자 지정 CSS로 변경한 내용의 접근성은 사용자 책임입니다.

## 관련 문서

- [로그인 페이지 브랜딩](/docs/guides/branding)
- [언어 및 오른쪽에서 왼쪽 쓰기](/docs/guides/localization)
- [React SDK](/docs/sdk/react)