フォーム、サインアップ、チェックアウトをアクセス可能にする: 電子商取引サイトでのリアルタイムのストレスを防ぐ

アクセシビリティ エラーが原因で失敗するサインアップまたはチェックアウト プロセスは、単なる抽象的な問題ではありません。購入を完了しなかった顧客、場合によっては戻ってこない顧客が原因です。この記事では、フォーム、サインアップ、チェックアウトのフローの最も重要な点に焦点を当てています。PDF フォームにも興味がある場合は、次のガイドを参照してください。アクセス可能な PDF フォーム.

リアルタイム エラー メッセージ

最も一般的な間違い: エラー メッセージは視覚的に表示されますが (フィールドの横にある小さな赤いテキスト)、スクリーン リーダーには通知されません。視覚障害のあるユーザーは、フォームに記入して「送信」をクリックしても、なぜ何も起こらないのか理解できません。なぜなら、エラーについてまったく聞いたことがないからです。修正: `aria-live` を使用してエラーを自動的にアナウンスし、各エラーを `aria-descriptionby` で関連するフィールドに直接リンクします。これにより、ユーザーがそのフィールドに到達した瞬間にスクリーン リーダーがエラーを読み上げます。

明確で永続的なフィールドラベル

プレースホルダー テキスト (入力を開始すると消える灰色のテキスト) は、実際のフィールド ラベルの代わりにはなりません。ユーザーが入力を開始した瞬間、そのフィールドが要求している内容のコンテキストさえ失われます。すべてのフォーム フィールドには、単に消えるヒントとしてではなく、入力プロセス全体を通して表示されたままになる (または少なくともスクリーン リーダーにアクセスできる) 本物の ` ` が必要です。

複数ステップのプロセス

複数ステップのサインアップまたはチェックアウト フロー (個人情報 ▸ 配送 ▸ 支払い ▸ 確認) では、ユーザーが合計ステップ数のうちどのステップにいるのかをスクリーン リーダーに明確に伝え、ユーザーが次のステップに進むときにそれをアナウンスする必要があります。これにより、視覚的な進行状況インジケーターが見えないユーザーが途中で方向を見失わないようになります。

アクセス可能な注文確認

購入またはサインアップが完了した後、確認メッセージ自体にアクセスできる必要があります。スクリーン リーダーに明確に通知され (ページ上のサイレントな視覚的変化だけでなく)、すべての重要な情報 (注文番号、金額、配達日) が画像ではなく実際のテキストとして含まれています。