# ホステッドページのアクセシビリティ

KeenAuth のホステッドログイン、アカウントポータル、メールページは、WCAG 2.2 レベル AA に準拠するよう設計されています。これは認証ではなく設計上の目標です。自動テストを実施しており、このページでは対象範囲と未対応の範囲を説明します。

## ページが提供する機能

- **ラベルとエラー。** すべての入力欄には、表示されたタイプの `<label>` が関連付けられています。エラーメッセージは、スクリーンリーダーにアラートとして通知されます。
- **キーボード操作。** コントロールはネイティブのフォーム要素で構成され、フォーカスは `color.focus_ring` で設定した色の見えるアウトラインで示されます。
- **言語と表示方向。** ページには、選択した言語の `lang` 属性と `dir` 属性が設定されます。アラビア語、ペルシア語、ヘブライ語は右から左へ配置されます。詳しくは [言語と右から左の表示](/docs/guides/localization) を参照してください。
- **小さい画面。** ページは幅 320 px のビューポートまで水平スクロールなしで折り返されます。
- **ライトとダーク。** 両方のテーマを個別にテストしています。
- **パスワード。** ホステッドページでは貼り付けを禁止しておらず、パスワードマネージャーが機能するよう入力欄に `autocomplete` 値を設定しています。

## テスト方法

自動テストスイートがホステッドページを開き、各ページについて、ライトテーマとダークテーマの両方で、対応しているすべての言語（30 言語）で、幅 320 px と 1280 px の条件で次の項目を確認します。

- 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)