入力フォームのユーザビリティ&アクセシビリティ

JIS X8341-3 + コマキハル :

入力項目の説明

入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。

悪い例×
※半角英数字
良い例○
※半角英数字

選択方法の説明

ラジオボタン、チェックボックスを使用した選択項目には、「選択可能な数」を明記するべきです。

悪い例×
選択可能数が明記されておらず、ユーザが複数選択した場合に、事前のラジオボタンの選択が解除される。
好きな食べ物 ※次から選択して下さい。
/ /
良い例○
選択可能数を明記しており、ユーザは複数選択することができないと分かる。
好きな食べ物 ※次から1つのみ選択して下さい。
/ /

言葉によるナビゲーション

言葉によってナビゲートする場合、位置情報を使うべきではありません。

悪い例×
相対的な位置情報で誘導しており、視覚によらない利用者やコンパクトブラウザの利用者等を混乱させる。
好きな食べ物（右から選択して下さい） / /
良い例○
構造的配置による誘導であり、どのような環境からの利用にも対応する。
好きな食べ物（次から選択して下さい） / /

入力フォームのラベル

フォーム部品と項目名（ラベル）を関連付けるべきです。

悪い例×
上記入力欄は項目名と関連付けられていない。
メールアドレス
（半角英数字）
良い例○
上記入力欄は項目名と関連付けられている。
悪い例×
上記ラジオボタンは選択項目名と関連付けられていない。
性別を選択 男性 / 女性
良い例○
上記ラジオボタンは選択項目名と関連付けられている。
性別を選択 /

入力データの整形

ユーザに対し、整形された文字列の入力を求めるべきではありません。

悪い例×
※姓名の間にスペースを入れて下さい。
良い例○
お名前 /
悪い例×
※ハイフン"-"で区切って下さい。
良い例○
※半角数字
電話番号 ※半角数字：--
--

入力文字の指定

氏名の読み仮名欄・半角文字等、指定外の文字が使用された場合には、エラーとしてユーザに再入力を求めず、システム側で自動変換します。

悪い例×
システムでエラーとして扱い、「Error：カタカナで入力して下さい」とユーザに再入力を求める。
ヨミガナ（カタカナ） /
良い例○
システムで変換し、「ニッポン　タロウ」と適切なデータとして受け付ける。
ヨミガナ（カタカナ） /
悪い例×
システムでエラーとして扱い、「Error：全角カタカナで入力して下さい」とユーザに再入力を求める。
ヨミガナ（全角カタカナ） /
良い例○
システムで変換し、「ニッポン　タロウ」と適切なデータとして受け付ける。
ヨミガナ（全角カタカナ） /
悪い例×
システムでエラーとして扱い、「Error：半角数字で入力して下さい」とユーザに再入力を求める。
※半角数字
良い例○
システムで変換し、「0312345678」と適切なデータとして受け付ける。
※半角数字
※ハイフン"-"は入れないで下さい。

不要空白の削除

入力文字列の前後に不要な文字（スペース等）が挿入されている場合、システム側で該当文字を削除して解釈します。

悪い例×
次の入力欄は文字列の後にスペースを挿入している。
システムでエラーとして扱い、「Error：メールアドレスの前後にスペースを挿入しないで下さい」とユーザに再入力を求める。
良い例○
次の入力欄は文字列の後にスペースを挿入している。
システムで修正し、「user@example.co.jp」と適切なデータとして受け付ける。
特殊な例
次の入力欄は文字列の後にスペースを挿入している。
個人認証であるため、システム側での修正解釈は相応しくない。

IMEモードの指定

スタイルシートの入力補助（ime-mode）やスクリプトにてユーザの入力モードを指定できるブラウザがありますが、指定には注意が必要です。

指定に注意すべき例
次の入力欄は"英数字入力モード"を指定している。
一見、英数字入力モードの指定が相応しく思えるが、利用者のリテラシによって適切さは異なる。
リテラシの低いユーザの場合、全角半角の区別がつかないことがあり、この場合は入力補助として、入力モードの指定が相応しい。また、リテラシの高いユーザの場合、ユーザ辞書にメールアドレスを登録していることがあり、この場合に文字変換によるメールアドレスの入力が行えないため、入力モードの指定が相応しくない。
指定に問題がない例
次の入力欄は"英数字入力モード"を指定している。
※半角数字
郵便番号
特殊な例
次の入力欄は"英数字入力モード"を指定している。
登録時に半角英数字を指定していた場合のみ、入力モードを指定しても問題ない。

住所の自動挿入

入力された郵便番号を用いて、住所フォームに住所を自動挿入する場合は、注意が必要です。

注意すべき例△
ユーザは自動挿入に安心し、住所の続きを入力しない恐れがある。
郵便番号
良い例○
住所が挿入されていない空欄により、ユーザは続きを記入する必要性を感じる。
郵便番号