この記事でわかること

  • ログインについて定めた、WCAGの達成基準3.3.8の内容
  • 「記憶の確認」に当たるものと、例外として認められる方法
  • 貼り付けや自動入力を止めないログインのフォームの書き方
  • 貼り付けを止めた入力欄と、ブラウザで比べた結果

セキュリティのためだからと、ログインのパスワードの欄で貼り付けを禁止したり、確認コードを1文字ずつ別の欄に打たせたりしていませんか。覚えたり書き写したりすることがとても難しい人もいます。この記事では、ログインに記憶やパズルだけを求めない作り方を、WCAG 2.2の達成基準3.3.8を軸に整理します。

根拠にしたのは、W3Cが公開している達成基準3.3.8の解説(Understanding)、技法H100、失敗例F109で、2026年10月31日に原文を読みました。比べたフォームは、この記事のための見本です。本物のパスワードやコードは使っていません。ツールやスクールを選んで勧めることはしません。

先に結論: 覚えて打つだけにせず、貼り付けと自動入力を使えるようにする

パスワードの欄は、ブラウザやパスワードの管理のツールが埋められるようにし、貼り付けも止めません。 確認コードは、1つの欄にまとめて入力できるようにします。

作り 基準との関係
ラベルとautocompleteを付け、貼り付けを止めない 満たす作りの例(H100)
パスワードの欄で貼り付けを止める 代わりの方法がなければ満たさない
確認コードを1文字ずつ別の欄に分ける 失敗(F109)
文字を書き写すだけの画像の確認 代わりの方法が要る

ログインに関わる基準(3.3.8)

WCAG 2.2の達成基準3.3.8(レベルAA)は、パスワードを覚えることやパズルを解くことのような認知機能のテストを、ログインのどの段階でも必須にしないことを求めています。ただし、その段階で次のどれかを用意していれば認められます。

  • 認知機能のテストに頼らない、ほかの認証の方法
  • テストを助ける仕組み
  • 物を見分けるテスト
  • 利用者が自分でサイトに渡した画像などを見分けるテスト

基準の注記では、助ける仕組みの例として、パスワードの管理のツールによる入力と、書き写す負担を減らすコピーと貼り付けを挙げています。

解説では、サイトごとのパスワードを覚えることも、認知機能のテストに当たるとしています。

「記憶の確認」に当たるものと、例外

解説では、ユーザー名とパスワードを覚えることは、ある種の認知の障害がある人にとって、とても大きな負担か、できないことだとしています。1回限りの確認コードを書き写すことや、パズルを解くことも、同じような負担として挙げられています。

文字を書き写す画像の確認に、音声の版があっても、聞いた文字を書き写す必要があるなら、ほかの方法としては使えないとされています。認証の段階が複数あるときは、すべての段階がこの基準を満たす必要があります。

書き方の例: ラベルとautocompleteを付けたログインのフォーム

次のHTMLは、メールアドレス・パスワード・確認コードの欄にラベルを付け、パスワードの欄にautocompleteを付けたログインのフォームの例です。貼り付けを止める処理は付けていません。

<form method="post" action="/login">
  <!-- ブラウザやパスワードの管理のツールが見分けられるよう、ラベルとautocompleteを付ける -->
  <label for="email">ログイン用のメールアドレス</label>
  <input type="email" autocomplete="email" name="email" id="email">

  <label for="password">パスワード</label>
  <input id="password" name="password" type="password" autocomplete="current-password">
  <!-- 貼り付けを止める onpaste などの処理は付けない -->

  <label for="code">確認コード(1つの欄にまとめて入力)</label>
  <input id="code" name="code" inputmode="numeric">

  <button type="submit">ログイン</button>
</form>

技法H100では、ブラウザやパスワードの管理のツールは、入力欄の名前を手がかりに埋め方を決めるとしています。そのうえで、欄を埋めることも、利用者の貼り付けも止めないよう求めています。

手順: 自分のサイトのログインの画面を見直す

  1. ログインの段階を書き出す: パスワード・確認コード・画像の確認など、ログインまでのすべての段階を並べます
  2. 貼り付けを止めていないかを見る: パスワードやコードの欄に、貼り付けを止める処理がないかを確かめます
  3. 自動入力を止めていないかを見る: ラベルとautocompleteがあり、自動で埋めることを止めるスクリプトがないかを確かめます
  4. コードの欄の形を見る: 確認コードを1文字ずつ別の欄に分けていないかを確かめます
  5. パスワードを忘れたときの手続きも見る: 取り戻すための段階にも、記憶の確認だけに頼る所がないかを確かめます

試した結果

上のHTMLと、パスワードの欄で貼り付けを止め、確認コードを1文字ずつ6つの欄に分けた版を作りました。両方のページを自分のPCの中で配信し、画面を出さないChromeで読み込んで比べました。

  • 上のHTMLでは、3つの入力欄にそれぞれラベルが結び付き、パスワードの欄のautocompleteは「current-password」でした
  • 上のHTMLでは、パスワードの欄に送った貼り付けの操作は止められませんでした。止める版では、同じ操作が止められました
  • 確認コードの「123456」を入力すると、上のHTMLでは1つの欄に6文字すべてが入りました。6つに分けた版では、最初の欄に「1」だけが入り、残りの5つの欄は空のままでした

確かめたのは作業PC(Mac)のGoogle Chrome 156で、ヘッドレスで動かしました。パスワードの管理のアプリを使った自動入力は試していません。

自分で直すか、相談するかの判断

目安は、「ログインの段階のどれにも、覚えて打つ・書き写すだけの所が残っていないか」です。貼り付けを止める処理を外す、コードの欄を1つにまとめる、といった直しは、フォームの中で済みます。

認証の方式そのもの(2段階の認証の方法や、画像の確認のサービス)を変える場合は、セキュリティの担当の人と相談して決めます。フォームの作り方に自信がなければ、Webデザインの講座で講師に見てもらうのも一つの手です。

つまずきやすいところ

まとめ

  • ログインのどの段階でも、覚えて打つことや書き写すことだけを求めないようにします
  • パスワードの欄は、自動入力と貼り付けを止めません
  • 確認コードは、1つの欄にまとめて入力できるようにします
  • パスワードを忘れたときの手続きも、同じ考え方で見直します