この記事でわかること

  • 入力フォームの目的を伝えるために、WCAGの達成基準1.3.5が求めること
  • autocomplete属性に入れる値の決め方と、HTMLでの書き方の例
  • 自動入力の保存と、利用者の操作について、W3Cの資料に書かれていること
  • まちがった値や、作った値を入れてしまうなどのつまずき

お問い合わせや申し込みのフォームで、名前・メールアドレス・住所を毎回ゼロから打ち込むのは、誰にとっても手間です。覚えておくことや、文字を打つことが難しい人にとっては、なおさら負担になります。この記事では、入力欄にautocomplete属性を付けて「この欄は何を入れる所か」を機械にも分かる形で示し、入力の手間を減らす方法をまとめます。

もとにした資料は、W3CのWCAG 2.2の本文と7章、Understanding、技法H98、失敗例F107で、どれも2026年10月25日に原文を読んで確かめました。書き方の例は、作業PCのブラウザで開いて、値が読み取れるかを確かめました。

先に結論: 本人の情報の欄に、決まった値で目的を書く

先に結論を書くと、名前やメールアドレスなど、記入する本人の情報を入れる欄には、WCAGの7章の一覧にある決まった値をautocompleteに書き、ラベルの内容と値を合わせます。 よく使う欄と値は、次の表のとおりです。

入力欄 autocompleteの値
名前 name
メールアドレス email
電話番号 tel
郵便番号 postal-code
住所 street-address
誕生日 bday

入力の目的とアクセシビリティの基準

WCAG 2.2の達成基準1.3.5(Identify Input Purpose)は、レベルAAの基準です。利用者についての情報を集める入力欄で、その目的がWCAGの7章の一覧にあり、使っている技術が目的を示す仕組みを持っているときは、目的をプログラムで読み取れるようにすることを求めています。

W3Cの解説では、この基準のねらいを、ブラウザなどが入力欄の目的を読み取り、いろいろな形で利用者に示せるようにすることだとしています。特定の種類のデータを求めていることを示せると、フォームの記入が楽になり、とくに認知に障害のある人の助けになるとしています。

typeだけでは目的まで伝わらない

入力欄には、type="email"やtype="tel"のように種類を示す属性もあります。ただし、W3Cの解説では、これらは入力の種類をおおまかに分けるだけで、目的までは示さないとしています。type="email"は、メールアドレスの欄であることは示しますが、利用者自身のメールアドレスか、ほかの人のものかは分かりません。

autocomplete属性は、決まった値しか受け付けないため、typeより細かく目的を示せます。たとえば名前でも、氏名全体(name)、名(given-name)、姓(family-name)、ユーザー名(username)、ニックネーム(nickname)を分けて書けます。

自動入力と支援技術でできること

W3Cの解説では、目的が示されていると、支援技術が入力欄の横に見慣れたアイコンを出せる例を挙げています。誕生日の欄にはケーキ、電話番号の欄には電話のアイコン、といった形です。また、ブラウザは、以前に入力して保存した値をもとに、合う欄へ自動入力を提案できます。利用者は文字を打つ代わりに、出てきた値を確かめ、必要なら直すだけで済みます。

autocompleteの値は言語によらないため、ラベルの言葉になじみのない利用者にも、目的が同じ形で伝わります。

自動入力の保存について資料に書かれていること

自動入力の情報の扱いを気にする人もいます。W3Cの技法H98では、次のように説明しています。

  • 保存は、同じパソコン・同じアカウント・同じブラウザの場合だけ使われ、複数のアカウントの間では共有されない
  • 保存するかどうかは、ふつう最初に保存するときに利用者が選ぶ
  • フォームは自動で送信されず、利用者は送る前に値を見られる
  • ブラウザの設定で、履歴やフォームのデータを消せる

個人情報をどう扱うかの決まりは、サイトを運営する人の方針によります。この記事では、法律上の義務までは扱いません。

書き方の例: お問い合わせのフォーム

次のHTMLは、技法H98の例をもとに、日本語のお問い合わせのフォームの形に書き直したものです。それぞれの入力欄に、見えるラベル(label要素)と、目的に合うautocompleteの値を付けています。項目の名前やidは、自分のフォームに合わせて変えます。

<form method="post" action="/contact">
  <label for="name">お名前</label>
  <input id="name" type="text" autocomplete="name">

  <label for="email">メールアドレス</label>
  <input id="email" type="email" autocomplete="email">

  <label for="tel">電話番号</label>
  <input id="tel" type="tel" autocomplete="tel">

  <label for="zip">郵便番号</label>
  <input id="zip" type="text" autocomplete="postal-code">

  <label for="addr">住所</label>
  <textarea id="addr" autocomplete="street-address"></textarea>

  <button type="submit">送信する</button>
</form>

W3Cの解説では、ここでいう入力欄は、input要素だけでなく、textarea要素やselect要素も含むとしています。この例の住所の欄はtextareaです。

手順: 値とラベルを1つずつ確かめる

W3Cの技法H98と失敗例F107の確かめ方に沿った手順です。

  1. 対象の欄を選ぶ: フォームの中から、記入する本人についての情報を集める欄を書き出します
  2. 一覧と照らす: それぞれの欄の目的が、WCAGの7章の一覧にあるかを確かめます
  3. 値を確かめる: 一覧にある欄に、正しい形のautocompleteの値が付いているかを確かめます
  4. ラベルと合わせる: ラベルが示す目的と、autocompleteの値が合っているかを確かめます
  5. ブラウザで読む: 開発者ツールなどで入力欄の値を見て、書いたとおりに読み取れるかを確かめます

試した結果

上のHTMLの例と、つまずきの例の入力欄を1つのページに入れ、作業PCのChrome(ヘッドレス)で開いて、各入力欄のautocompleteの値を読み取りました。

  • 例の5つの欄は、name・email・tel・postal-code・street-addressの値がそのまま読み取れました
  • 一覧にない、作った値のbirthdayを書いた欄は、値が空として読み取られました。正しい値のbdayの欄は、bdayと読み取れました
  • 値を全部大文字で書いた欄(EMAIL)は、小文字のemailとして読み取られました

使ったブラウザは、Mac の作業PCに入っている Google Chrome 155 で、画面を出さないヘッドレスの形で動かしました。値の読み取りだけを確かめていて、自動入力が実際に働くかは試していません。

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

判断の目安は、「その欄が誰の、何の情報かを、自分で言い切れるか」です。名前やメールアドレスのように目的がはっきりしている欄は、上の表と手順で自分で値を付けられます。

1つの欄で2つの目的を受け付ける場合(ユーザー名とメールアドレスを同じ欄で受けるなど)は、W3Cの解説では、どちらか一方の値を付けるか、目的を示さないこともできるとしています。フォームの作りそのものを変えるかどうかは、サイトを作った人やWebデザインの講師と相談して決めます。

つまずきやすいところ

  • 値を自分で作る: 失敗例F107では、誕生日の欄に、一覧の値のbdayではなく、作った値のbirthdayを書いた例を、満たさない例にしています
  • ラベルと違う目的の値を書く: F107には、名前の欄にemailの値を付けた例も挙げられています
  • ほかの人の情報の欄に付ける: 技法H98では、記入する本人の情報を求めるときだけ使うとしています
  • 見えるラベルを省く: autocompleteは見えるラベルの代わりにはなりません。ラベルの付け方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法で紹介しています
  • 入力のまちがいの知らせを忘れる: 自動入力した値がまちがっていることもあります。どこがどう違うかの伝え方は、Webデザインで入力エラーを分かりやすく伝える方法にまとめています
  • キーボードで入力欄を移れない: フォームを、マウスを使わずTabキーで欄を移りながら記入する人もいます。確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています

まとめ

  • WCAGの達成基準1.3.5は、利用者自身の情報を集める入力欄に、目的をプログラムで読み取れる形で示すことを求めています
  • typeは種類をおおまかに示すだけなので、目的はWCAGの7章の一覧にある値でautocompleteに書きます
  • ラベルの内容と値を合わせ、作った値やほかの人の情報の欄には使いません
  • 自動入力が働くかではなく、目的が読み取れるかで確かめます