WCAG 2.2の達成基準3.3.8「アクセシブル認証（最低基準）」は、ログインなどの認証プロセスで、パスワードの記憶や複雑な問題の解決といった認知的な作業に過度に依存しないことを求めるLevel AAの基準です。
パスワード認証を一律に禁止する基準ではありません。
代替手段を用意するか、パスワードマネージャーなどの支援機能を利用できるようにすることで、認証の負担を減らせます。
WCAG 2.2で追加された達成基準の全体像を先に確認すると、3.3.8の位置づけをつかみやすくなります。
3.3.8が求めるアクセシブルな認証
認知機能テストとは、利用者に情報を覚えさせたり、問題を解かせたりする認証上の作業を指します。
代表例は、記憶したパスワードの入力や複雑なパズルの解答です。
認証プロセスで認知機能テストを求める場合は、次のいずれかに当てはまる設計が必要です。
| 対応 | 意味 | 原文にある例 |
|---|---|---|
| 代替手段 | 認知機能テストに依存しない別の認証方法を選べるようにする | メールリンク認証、WebAuthn |
| 支援機能 | 認知的な作業を利用者が完了できる仕組みを用意する | パスワードマネージャー、コピーと貼り付け |
| 物体認識 | 画像に含まれる物体を認識する方法を使う | 物体を選ぶ画像認識テスト |
| 本人が提供したコンテンツ | 利用者が以前に提供した非テキストコンテンツを認識する | 本人が提供した写真などの選択 |
四つは同じ対策ではありません。
既存の認証方式がどの対応に当たるのかを分けて確認すると、実装とテストの対象が明確になります。
パスワード入力を支援する実装
パスワード方式を残す場合は、利用者がパスワードマネージャーを使えるようにし、コピーと貼り付けを妨げないことが実践的な対応になります。
入力欄をパスワードマネージャーに伝える
ユーザー名とパスワードの入力欄には、対応するラベルと適切なautocomplete属性を指定します。
<form action="/login" method="post">
<label for="username">ユーザー名</label>
<input
type="text"
id="username"
name="username"
autocomplete="username"
required
>
<label for="password">パスワード</label>
<input
type="password"
id="password"
name="password"
autocomplete="current-password"
required
>
<button type="submit">ログイン</button>
</form>マークアップを整えた後は、実際のパスワードマネージャーで保存済み情報を呼び出せるか確認します。
属性を付けるだけで確認を終えないことが大切です。
コピーと貼り付けを許可する
パスワード欄への貼り付けを禁止すると、利用者は長いパスワードを手作業で再入力しなければなりません。
コピーと貼り付けを利用できる状態にし、入力の記憶と転記にかかる負担を減らします。
認知機能テストに依存しない代替手段
認証方法を複数用意できる場合は、メールリンク認証やWebAuthnを選択肢にできます。
メールリンク認証
利用者がメールアドレスを入力し、届いた認証リンクを開く方法です。
入力欄にはラベルを関連付け、メールアドレスの入力支援を利用できるようにします。
<form action="/send-auth-link" method="post">
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
<button type="submit">認証リンクを送信</button>
</form>WebAuthn
WebAuthnは、指紋認証やセキュリティキーなどを使い、記憶したパスワードに頼らずに認証する方法の一例です。
導入するときは、利用者がその方法を選択し、認証を最後まで完了できることを確認します。
画像を使う認証の考え方
画像を使う認証は、すべてが同じ扱いになるわけではありません。
3.3.8では、物体を認識するテストと、利用者が以前に提供した非テキストコンテンツを識別するテストが分けて示されています。
たとえば、本人が以前に提供した写真を複数の候補から選ぶ方法は、後者に当たる例です。
単に画像を使えばよいと判断せず、認証で利用者に何を認識させているのかを確認します。
よくある失敗と改善方法
| 失敗 | 改善方法 |
|---|---|
| パスワードを記憶して再入力する方法しかない | パスワードマネージャーを利用できるようにするか、別の認証方法を用意する |
| パスワード欄への貼り付けを禁止している | コピーと貼り付けを許可し、手作業による転記を求めない |
| 代替手段を用意したが、実際の操作を確認していない | 選択から認証完了までを一連の流れとして手動で確認する |
| 画像テストなら条件を満たすと一括りにしている | 物体認識か、本人が提供したコンテンツの識別かを分けて確認する |
適合性を確認する手順
- 認証プロセスの各画面と操作を順番に洗い出します。
- 情報の記憶や問題の解決を求める箇所を特定します。
- 各箇所について、代替手段、支援機能、物体認識、本人が提供したコンテンツのいずれに当たるか確認します。
- パスワードマネージャーによる入力と、コピーと貼り付けを実際に試します。
- 代替手段がある場合は、選択から認証完了まで操作します。
AxeやWAVEなどの自動テストツールは、フォームのマークアップを確認する手がかりになります。
一方で、認証プロセス全体の認知的な負担や代替手段の使いやすさは、自動検査だけでは判断せず、手動操作でも確認します。
実装時のチェックリスト
- 認証のどの段階で記憶や問題解決を求めているかを把握した
- 代替手段または支援機能を利用できる
- ユーザー名とパスワードの入力欄に対応するラベルがある
autocomplete属性を適切に指定した- パスワードのコピーと貼り付けを妨げていない
- 画像テストを使う場合、その内容が物体認識または本人提供コンテンツの識別に当たるか確認した
- 自動テストに加えて、認証完了までを手動で確認した
認証の負担を減らすために
3.3.8への対応では、認証方式の名称だけで判断せず、利用者が実際に記憶、転記、問題解決を求められる場面を見つけることが出発点です。
そのうえで、代替手段か支援機能を用意し、画像認証を使う場合は二つの例外を区別して確認します。
より高い適合レベルの関連基準を確認する場合は、3.3.9「アクセシブル認証（拡張）」Level AAAの解説も参照してください。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。