2025年05月20日掲載
秘書：前回、友人のプレゼントを購入しようとオンラインストアのアカウント登録を試みた見習い君。どうやら無事登録できたようで一安心。と思いきや、再び師匠がやってきて何やら言いたげな様子。
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
入力の手間を減らすちょっとした工夫
師匠：無事、アカウント登録できたようじゃな。？
見習い君：はい！プレゼントも購入できてよかったです！
師匠：何を買ったんじゃ？と聞きたいところじゃが、勉強を再開するとしよう。
見習い君：えー！そんなあ、今日はあれで終わりだと思っていたのに…
師匠：いいからいいから。それでさっき、入力フォームにはまだ注意する点があると教えたが、覚えているじゃろうか？
参考記事：
制限時間のある入力フォームは大きなバリア！‐第25回‐
見習い君：あれ？何でしたっけ…
師匠：まぁ、時間も空いてしまったし、忘れてしまうのも無理はないな。それでは改めてじゃが、「1.3.5: 入力目的の特定」について教えるぞ。
見習い君：お手柔らかにお願いしますね！
師匠：少し難しい話じゃが、名前や電話番号、メールアドレスといったあらかじめ入力内容が想定できるフォームには”autocomplete”（オートコンプリート）という属性と、それに対応した特定の値を指定する必要があるのじゃ。
見習い君：autocomplete属性？
師匠：そうじゃ。これを使うと、入力された情報をブラウザ側で記憶してくれるから、別のサイトでも同じ情報をすぐに入力できるようになってとても便利なんじゃ。
見習い君：ふむふむ。
師匠：たとえば名前の入力欄には「given-name」や「family-name」、電話番号は「tel」、メールアドレスは「email」といった具合じゃ。HTMLの仕様に沿ったキーワードを使うことで、支援技術やブラウザがそのフィールドの意味を正しく理解できるようになるぞ。
見習い君：これ、もしさっきのオンラインストアにも実装されていたら、もっとアカウント登録がスムーズにできたかもしれないなぁ。
師匠：そうじゃな。反対に、パスワードやクレジットカード情報など、自動で保管されると困るような情報には「off」を指定すると良いぞ。
見習い君：なるほど！じゃあこれから、すべての入力フォームに autocomplete 属性を提供しなきゃですね！
師匠：ふむ、そう言いたいところなんじゃがそんな簡単な話ではないんじゃ。 実は、WCAGで推奨されているのはユーザーの個人情報など、「入力内容が想定できるフィールド」に対してなんじゃ。検索フォームや自由記述欄など、何を入力するか想定できないフィールドには不要なんじゃよ。
見習い君：なるほど…じゃあ、使い方にも気をつけないといけないんですね。
師匠：そうじゃ。しかも、autocomplete属性を追加したからといって、必ずしも機能するとは限らんのじゃ。
見習い君：えっ、どういうことですか？
師匠：利用者のブラウザや端末、そして設定によってはこの機能が無効になっていたり、保存されないこともあるんじゃ（注）。
見習い君：そうなんですね…でも、ちゃんと対応しておけば、少なくとも使える可能性は高くなるってことですよね！？
師匠：その通りじゃ！すべての利用者の環境をコントロールすることはできんが、こちらができる配慮はしておく。これがアクセシビリティの基本じゃな。
（注）：シークレットモードでは履歴が残らないほか、企業や学校のネットワークではセキュリティの都合で無効にされている場合もあります。さらにブラウザによってはautocomplete属性がなくても履歴を補完してくれる場合もあるため、開発者が設定しても必ず意図どおりに動くとは限らないという点に注意する必要があります。
秘書：今回は、入力フォームにおける autocomplete 属性の活用と、その背景にあるアクセシビリティの考え方について学びました。利用者がスムーズに情報を入力できるようにすることで、バリアのない快適な体験につながります。もっと詳しく知りたい方は、以下のリンクから達成基準をご覧ください。
