導入
Webフォームや入力欄において、ブラウザが勝手に単語を書き換えてしまう「自動修正（オートコレクト）」機能に悩まされたことはありませんか？特に人名やID、専門用語を入力する際、この機能が原因でユーザーが意図しない文字列に変換されてしまうケースは少なくありません。今回は、HTMLのグローバル属性である「autocorrect」を適切に制御し、ユーザーが快適に入力できる環境を作るための技術Tipsを解説します。
基礎知識
autocorrect属性は、入力要素（inputやtextareaなど）に対して、ブラウザや端末のOSが行う綴りや句読点の自動修正を「有効（on）」にするか「無効（off）」にするかを制御するものです。
特にモバイル端末では、OSレベルで「入力補助」が強力に働くため、あえてこの属性を無効化することで、ユーザーの入力ストレスを大幅に軽減できる場合があります。なお、パスワードやメールアドレス、URLなど、自動修正が不適切な入力タイプでは、ブラウザ側で自動的に無効化される仕様になっています。
実装/解決策
基本的には、ユーザーが意図的に入力するテキストフィールドに対して「autocorrect=”off”」を付与します。特にユーザー名やIDなど、一意性が求められるフィールドでは必須の対応です。
現場の設計としては、以下の原則を守るのがおすすめです。
1. 氏名・ユーザーID・検索ワード：ユーザーの意図を尊重するため、autocorrect=”off” を推奨。
2. 自由記述欄（日記やブログなど）：誤字を減らすためにデフォルト（on）のままにする。
3. フォーム全体での制御：form要素に属性を指定することで、配下の要素に一括で継承させることも可能です。
サンプルプログラム
以下のコードは、ユーザー名入力欄で自動修正をオフにし、自由記述欄ではそのままにする実装例です。
応用・注意点
現場で最も注意すべき点は、ブラウザ間の挙動差です。autocorrectは標準化が進められていますが、すべてのブラウザで完全に同一の挙動をするわけではありません。
・spellcheck属性との併用：
自動修正（autocorrect）と並んで、スペルチェック（spellcheck=”false”）も併用することで、より厳密に余計なUI表示や変換を防ぐことができます。
・ユーザーの利便性とのバランス：
セキュリティを意識するあまり、あらゆる入力項目をoffにすると、一般的な文章入力時にユーザーのタイポが修正されず、逆にストレスを与える可能性があります。本当に自動修正が不要な項目を見極めて適用することが、シニアデザイナーとしての腕の見せ所です。
まずは、現在運用しているフォームで「意図しない変換が起きていないか」をモバイル端末で再確認し、必要な箇所に属性を付与することから始めてみてください。