ホステッドページのアクセシビリティ
KeenAuth のホステッドログイン、アカウントポータル、メールページは、WCAG 2.2 レベル AA に準拠するよう設計されています。これは認証ではなく設計上の目標です。自動テストを実施しており、このページでは対象範囲と未対応の範囲を説明します。
ページが提供する機能
- ラベルとエラー。 すべての入力欄には、表示されたタイプの
<label>が関連付けられています。エラーメッセージは、スクリーンリーダーにアラートとして通知されます。 - キーボード操作。 コントロールはネイティブのフォーム要素で構成され、フォーカスは
color.focus_ringで設定した色の見えるアウトラインで示されます。 - 言語と表示方向。 ページには、選択した言語の
lang属性とdir属性が設定されます。アラビア語、ペルシア語、ヘブライ語は右から左へ配置されます。詳しくは 言語と右から左の表示 を参照してください。 - 小さい画面。 ページは幅 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 で拒否されます。エラーには該当フィールド名が示され、基準を満たす最も近い色が提案されます。提案では色相と彩度は保たれ、明度のみが調整されます。基準を満たさないブランディングは公開できません。詳細とエラー形式については、ログインページのブランディング を参照してください。
カスタム CSS（Startup プラン）はコントラストを下げる可能性がありますが、KeenAuth では補正しません。プレビューのスキャンでは、問題は警告として報告されます。カスタム CSS による変更のアクセシビリティは、お客様の責任となります。