WordPress 用のアクセシブルな Web フォームを作成する方法
CDC によると、米国の成人の 26% が何らかの障害を抱えています。視覚障害や認知障害のある人が Web サイトにアクセスできるようにしないと、トラフィックの損失、SEO ランキングの低下、さらには法的紛争につながる可能性があります。
最近のほぼすべての Web サイトには、製品の注文フォームであっても、お問い合わせフォームのような単純なものであっても、何らかのフォームが含まれています。フォームは多くの場合、Web サイトの中で最もアクセスしにくい部分の 1 つであるため、特別な注意が必要です。
カスタム コードまたはプラグインを使用してフォームを実装する方法に関係なく、フォームに完全にアクセスできるようにするには、特定のガイドラインとベスト プラクティスに従う必要があります。
この投稿では、WordPress 用のアクセシビリティ対応の Web フォームを作成する方法を学びます。これにより、より多くの視聴者にリーチし、Web サイトのユーザー エクスペリエンスを向上させ、収益を増やすことができます。
ウェブサイトのアクセシビリティとは何ですか?
WAVE アクセシビリティ チェッカーのようなツールは、アクセス可能な要素と改善の機会を示します。
World Wide Web Consortium が運営する Web Accessibility Initiative は次のように書いています。
「Web アクセシビリティとは、障害を持つ人々が使用できるように Web サイト、ツール、テクノロジーが設計および開発されることを意味します。より具体的に言うと、人々は Web を認識、理解、ナビゲートし、対話することで Web に貢献することができます。 」
視覚障害、身体障害、または認知障害を持つユーザーにとって、Web サイトの閲覧、情報の入力、適切なリンクやボタンの選択は困難な場合があります。アクセシビリティには、サイトを次の方法で使用できるようにするための一連のベスト プラクティスの実装が含まれます。
- スクリーン リーダーを使用する視覚障害のある人
- キーボードを使用してサイトを移動する、移動に問題がある人
- 認知障害のある人
- 色盲の人
- 音声検索に依存している人
- 英語を母国語とせず、翻訳サービスを利用している人
- 腕の骨折などの一時的な症状があり、キーストロークを使用して情報を入力する必要がある人
フォームは、操作が難しく、記入するのがわかりにくいため、アクセシビリティの最大の課題の 1 つです。
アクセシブルな Web フォームの重要性
フォームはあなたと顧客の間の架け橋として機能します。したがって、障害のある人がフォームにアクセスできるようにすることが重要です。 WordPress 全体のアクセシビリティのために Web フォームを最適化する最も重要な理由をいくつか紹介します。
法的紛争を避ける
ますます多くの州が Web アクセシビリティ義務を導入し始めているため、近いうちに Web サイトのアクセシビリティが法的要件となる可能性があることをご存知ですか?これは、アメリカ障害者法（ADA）に基づいて提起された有名ブランドに対する訴訟によって引き起こされた。
収益を増やす
法的要件とは別に、アクセシビリティは収益の増加に役立ちます。たとえば、2019 年の英国 Click-Away Pound 調査の結果では、障害を持つユーザーの大部分がアクセシビリティの問題を理由に Web サイトを離れ、潜在的な支出額が 170 億ドルを超えることがわかりました。
ユーザーエクスペリエンスの向上
アクセシビリティのベスト プラクティスに従うと、Web サイトをナビゲートしやすく、読みやすくすることができます。アクセシビリティの変更は、障害を持つユーザーだけでなく、Web サイトへのすべての訪問者のユーザー エクスペリエンスを向上させるのに役立ちます。
SEOを強化する
Web サイトの構造に細心の注意を払い、ページをナビゲートしやすくすると、検索エンジンがクロールしやすくなり、サイトの SEO が向上します。さらに、alt タグと呼ばれる説明的な「代替テキスト」を画像に追加することは、視覚障害のある人にとっても、検索エンジンにとっても、コンテンツを理解する上で非常に重要です。
検索エンジンは、誰もが利用しやすいコンテンツを優先します。そのため、アクセシビリティは SEO において常に重要な要素となります。
より多くの聴衆を魅了する
欧州委員会、国連、その他の機関の統計によると、世界人口の約 20% が何らかの障害を抱えていると考えて間違いありません。これを考慮すると、アクセシビリティのベスト プラクティスを実装すると、より多くの顧客を引き付けることができます。
アクセシブルな Web フォームを作成するためのガイドライン
では、WordPress Web サイト用にアクセシビリティ対応のフォームを作成するにはどうすればよいでしょうか?従うべきガイドラインをいくつか示します。
アクセシビリティのために構築されたフォーム プラグインを使用する
時間と労力を節約したい場合は、アクセシビリティ機能がすでに含まれている WordPress フォーム プラグインを使用する必要があります。アクセシブルなフォームに関して言えば、最高のプラグインの 1 つは Gravity Forms です。
Gravity Forms はアクセシビリティに全力で取り組んでいます。これは最新リリースに反映されており、世界標準である WCAG 2.1 AA 準拠を達成するアクセシブルなフォームの構築に役立つ多くの重要な機能が含まれています。
Gravity Forms 2.5 には、他のフォーム プラグインを上回るさまざまなアクセシビリティ機能強化が含まれています。これには、視覚障害のあるユーザーに対するスクリーン リーダーの詳細なフィードバックや、アクセシビリティの問題があるフィールドに関する管理領域の警告が含まれます。
しかし、アクセシビリティだけが Gravity Forms を使用する理由ではありません。 Gravity Forms を拡張する強力なアドオンも多数あり、強力な Web アプリを構築できます。
何が期待されるかをユーザーに通知する
全体的な明瞭さは、アクセシビリティだけでなく、ユーザー エクスペリエンス全体にとっても重要です。フォームを作成するときは、スキャンしやすく、各フィールドに明確な指示があることを確認してください。ユーザーがフォームがわかりにくいと感じた場合、不満を感じてサイトから離れる可能性があります。
フォームに複数のステップがある場合は、ユーザーに自分がどの段階にいるのか、残りのステップが何ステップあるのかを知らせることが重要です。ユーザーが必要に応じて情報を変更または更新できるように、前のステップに戻る方法があることを確認します。
最後に、すべてのボタンとリンクに説明テキストを入力して、クリックしたときに何が起こるかを明確にします。リンクテキストとして「ここをクリックしてください」を使用する代わりに、「私たちのブログ」のようなリンクを説明するものを使用してください。ボタンについても同様です。 「Submit」は無味乾燥で一般的なものであり、「Subscribe」や「Send message」など、ユーザーが実行しているアクションを説明するものを使用します。
フィールドのラベルと説明
ラベルを作成するときは、ラベルが意味のあるものであることを確認し、ユーザーに何を記入する必要があるかを明確かつ簡潔に伝えてください。アクセシビリティ設定を最適にするには、フィールド入力の上のわかりやすい場所にラベルを配置します。スクリーン リーダーを混乱させる可能性があるため、HTML やリンクは含めないでください。
フォームプラグインを使用している場合は、フィールドの説明を記述するオプションもあります。これらはオプションですが、フィールドに関する追加情報を提供する必要がある場合に使用できます。
色のコントラスト
ウェブサイトで使用されている色は、アクセシビリティの重要な要素です。色のコントラストは、前景のフォントと背景の色の間の光の違いを指します。フォームの色の選択が適切でないと、特に視覚障害のある人にとってフォームが読みにくくなる可能性があります。
WordPress の場合、フォームの色は通常テーマによって決まりますが、独自のカスタム CSS スタイルを追加することでこれを上書きできます。また、フォームの指示では色について言及しないように注意してください。たとえば、「緑色のボタンをクリックして続行してください」と言わないでください。これは、色盲のユーザーにとって問題を引き起こす可能性があります。
フォントのサイズと太さもアクセシビリティの重要な選択です。フォームに選択したフォントが鮮明で読みやすいものであることを確認してください。 One Click Accessibility など、ユーザーがさまざまな色の組み合わせを使用して Web サイトを表示できるようにするプラグインがいくつかあります。
条件付きロジック
フォームに条件付きロジックが含まれている場合は、それがアクセシビリティに影響を与えていないことを確認してください。たとえば、条件ロジックを使用して「送信」ボタンを非表示にしないでください。
再キャプチャ
CAPTCHA と reCAPTCHA はスパム対策戦略の重要な部分かもしれませんが、アクセシビリティの点では悪夢です。 CAPTCHA では、多くの場合、ユーザーが画面上で情報を入力したり、特定の画像を選択したりする必要があります。これはユーザー エクスペリエンスを低下させるだけでなく、認知障害や視覚障害のある人にとっては課題でもあります。
CAPTCHA の代わりに、ハニーポット フィールドやプライバシーを重視したスパム プラグインなど、ユーザー エクスペリエンスに影響を与えない代替手段を使用します。この分野でよく知られているお気に入りは Akismet ですが、それには値札が付いています。
エラーメッセージ
エラー メッセージが実用的で明確に書かれていることを確認してください。エラー メッセージでは、エラーや欠落に関するフィードバックと、それらの修正方法を説明する必要があります。たとえば、「エラーが発生しました」と言う代わりに、「パスワードが短すぎます。」と言うことができます。 12文字以上のパスワードを入力してください。」
あなたの仕事は、ユーザーがフォームに記入するのを手助けして、迅速で楽しいプロセスになるようにすることであることを忘れないでください。十分な情報が提供されないエラー メッセージは、不安やイライラを引き起こす可能性があります。
キーボードナビゲーション
障害のあるユーザーの多くはマウスを使用できないため、タブ キーのみを使用してフォームを操作できるようにしてください。これには、エラー メッセージを閉じることや、前の手順に戻ることも含まれます。
堅牢な HTML マークアップ
フォームを最初から作成する場合は、正しい HTML を使用することが重要です。これは、スクリーン リーダーが情報を中継するときに使用するものだからです。たとえば、ラベルでは、<span> タグや <div> タグではなく、
さらに、複数の入力オプションがあるフィールドでは、