概要
主に「2016年 - 2017年」の記事から引っ張ってきて、ただただ羅列したものです。
なので、このまとめ自体の最適化が成されてないですが、そこはご容赦ください…
ユーザビリティ・アクセシビリティ
分かりやすさ
- 入力項目は必要最低限にする
- 項目名は簡潔で短く分かりやすいものにする
- できる限り入力フィールドの数は最小限にする
- 一つの項目の入力フィールドを複数に分けない
- 例：姓名、電話番号、郵便番号など
- 必須項目は、「＊」ではなく「必須」と表示する
- ラベルやヒント（○文字以上必要です）をplaceholderに設定しない
- フォーカスした際に消えてしまうため、入力例を入れてあげる程度にする
- フォーカスした際の入力フィールドのデザインを変える
- 入力フィールドのサイズは、入力される値に合わせる
- リアルタイムでチェック出来るバリデーションを実装する
- エラーメッセージは、上部にすべて表示するのではなく、各項目の近くに表示する
- エラーメッセージは、以下の点が分かるようなものにする
- どこがエラーか
- なぜエラーか
- どのように修正すれば良いか
- アクションボタンには、汎用的な言葉ではなく、クリックした時に実行されるアクションを正確に示す
- 例：×「送信する」 ○「内容を送信する」
- ページ離脱時にアラートを出す
- エラー画面には、エラーの項目だけを表示する（作りによるので任意）
使いやすさ
- 入力するテキストの種類に合わせたキーボードを表示させる
- Tabキーで次の入力項目にフォーカスされるようにする
- フォントサイズを16px以上にする
- フォーカスした際のズームを防ぐため
- 住所は郵便番号から自動検索出来るようにする
- リセットボタンは作成しない
- 半角・全角をどちらも入力可とする
- タップしやすい入力フィールドやボタンの大きさにする
- チェック項目はラベルをクリック・タップでもチェックが付くようにする
- autofocus属性を使用し、ページが読み込まれた段階で一つ目の入力フィールドにフォーカスが当たるようにする（作りによるので任意）
サンプルコード
姓名
<input type="text" name="name" autocomplete="name">
姓
<input type="text" name="family-name" autocomplete="family-name">
名
<input type="text" name="given-name" autocomplete="given-name">
電話番号
<input type="tel" name="tel" autocomplete="tel">
メールアドレス
<input type="email" name="email" autocomplete="email">
郵便番号
<input type="number" name="postal-code" autocomplete="postal-code">
都道府県
<input type="text" name="address-level1" autocomplete="address-level1">
市区町村
<input type="text" name="address-level2" autocomplete="address-level2">
番地・マンション名（1行目）
<input type="text" name="address-line1" autocomplete="address-line1">
番地・マンション名（2行目）
<input type="text" name="address-line2" autocomplete="address-line2">
会社名
<input type="text" name="organization" autocomplete="organization">
補足
- type="number" はブラウザ・バージョンごとに挙動が違うため扱いに注意
- 自動入力を無効にする場合は、autocomplete属性をoffにする
おわり