どうしてチェックリストが必要か
ユーザーにとってはフォームがブラウザーを通じてウェブページとコミュニケーションできる一番シンプルな手段ですが、作成方法はシンプルに見えてもいろんな観点があって割と複雑です。
情報設計、デザイン、マークアップ、実装、それぞれのステップでフォーム作成するときに、どの観点から見ても最高を目指したいので、チェックリストを作成しました。
チェックリストのいろんな段階と観点
1. Accessibility
デザイン段階でまず見た目に関わる部分を指定して、目に見えないもの（スクリーンリーダーの対応など）の方針を決めるとマークアップの品質がかなり上がります。
2. SEO
Accessibilityと同様で情報設計段階やデザイン段階で目に見えない部分まで想定するとマークアップの品質がかなり上がります。
3. UX
情報設計 → デザイン
フォームの様々なステートチェック、バリデーション、使いやすさを早い段階で考える
4. Branding
主に情報設計からデザイン段階までチェックできる項目になりますが、
テキストやエラーのトーン、色味や大きさなどブランドのイメージになるべく合わせる
チェックリスト
様々な視点から見てベストプラクティスをまとめました。
- 意味のある HTML 要素を使用します:
<form>、<input>、<label>、および<button>。 - 各入力に
<label>のラベルを付ける。 - ブラウザーの標準機能にアクセスできるように要素属性を使用する: type、name、autocomplete、required。
- 入力の
nameおよびid属性に、ページの読み込み間またはWebサイトのデプロイ間で変化しない安定した値を指定します。 - サインインを独自の
<form>要素に配置する - フォームの送信が成功することを必ず確認する
- サインアップフォームでのパスワード入力、およびパスワード再設定フォームでの新しいパスワードには、
autocomplete="new-password"およびid="new-password"を使用する - サインイン パスワードの入力には、
autocomplete="current-password"およびid="current-password"を使用します。 - パスワード表示機能を提供する10.
- パスワード入力には aria-label と aria-記述者を使用してください。
- 二重送信を不可能に
- モバイル キーボードが入力やボタンを覆い隠さないようにフォームを設計します。
- フォームがモバイルで使用できることを確認します。読みやすいテキストを使用し、入力とボタンがタッチ ターゲットとして機能するのに十分な大きさであることを確認してください。
- サインアップ ページとサインイン ページでブランディングとスタイルを維持します。
- フィールドとラボでテストします。ページ分析、インタラクション分析、ユーザー中心のパフォーマンス測定をサインアップとサインイン フローに組み込みます。
- ブラウザとデバイス全体でテストする: フォームの動作はプラットフォームによって大きく異なります。