フォームをアクセシブルにするためのベストプラクティス

フォームをアクセシブルにするためのベストプラクティス

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

アクセスできないフォームの影響

Web アクセシビリティへの関心が高まっているにもかかわらず、インターネット上の多くの部分、特にオンラインフォームは、障がいのあるユーザーにとって依然としてアクセスできない状態です。これは、多くの人々にとって情報やインタラクティブな体験への大きな障壁となっています。
  1. 排除: 障がいのあるユーザーは、情報へのアクセス、アプリケーションの提出、アンケートへの参加、その他フォームを利用するオンライン活動から排除されてしまいます。
  2. ユーザー体験の悪化: アクセスできないフォームに直面すると、ユーザーは不便さや不満を感じ、手続きを途中で諦めてしまうことがあります。
  3. 潜在的な顧客の損失: ビジネスや組織は、フォームがアクセスできないことで貴重なエンゲージメントや潜在顧客を失う可能性があります。

対策は?

  1. 認識の向上: フォームのアクセシビリティの重要性について認識を高めることが不可欠です。開発者、デザイナー、コンテンツ制作者を含むチーム全体が、accessible フォーム作成のベストプラクティスについて十分に理解しておく必要があります。
  2. ガイドラインの遵守: WCAG(Web Content Accessibility Guidelines)など確立されたアクセシビリティガイドラインに従うことで、誰もが利用しやすいフォームの設計・構築が実現します。
  3. テストとユーザーフィードバック: 障がいのあるユーザーによる定期的なテストを実施し、そのフィードバックを設計プロセスに取り入れることは、本当に accessible な体験を提供するために不可欠です。

Zoho Forms で accessible フォームを作成するには?


accessible フォームを作成するための推奨事項を以下にまとめました。

Best practises for creating accessible forms

  1. フォーム名およびフォーム説明には、フォームの目的が明確に伝わるようにしましょう。
    1. フォームの用途が明確にわかる名前を付けてください。
    2. 「Registration Form」のような一般的なものではなく、「顧客 Registration Form」や「Event Registration Form」など、より具体的な名前を使用してください。
    3. フォームの目的や利用意図を簡潔に数文で説明しましょう。専門用語や複雑な文章は避けてください。
    4. ユーザーに伝えたい特定の注意事項や要件がある場合は、説明項目に箇条書きで記載してください。
      例:
      フォーム名: オンラインコースのフィードバック
      Form 説明: 最近受講したオンラインコースについて、率直なフィードバックをご共有ください。いただいたフィードバックは、コースの改善やより良い学習体験の提供に活かされます。
  2. Web Content Accessibility Guidelines(WCAG)に準拠したフォームのアクセシビリティ対応では、画像に代替テキストを設定することが重要です。これにより、障がいのあるユーザーも画像の内容を把握できるようになります。
    例えば、説明項目に画像を含めた場合は、画像に対して代替テキストを設定してください。スクリーンリーダーを利用するユーザーにも画像の内容や意図が伝わるよう、文脈に合った説明を入力しましょう。また、バナー画像ヘッダーロゴにも代替テキストを追加できます。



  3. フォームに画像 Choices項目を含める場合、追加した各画像選択肢に適切な名前を必ず設定してください。「画像 1」「画像 2」などの汎用的な名前ではなく、具体的な内容を表す名前を付けることで、アクセシビリティやユーザー体験が向上します。スクリーンリーダー利用者は画像名を頼りに選択肢を把握するため、わかりやすい名前付けが重要です。
    1. 名前は画像に写っている内容を正確に表すものにしてください。
    2.  長すぎたり複雑すぎる名前は避け、覚えやすく理解しやすいものにしましょう。
    3. すべての画像選択肢で命名形式を統一してください。
  4. フォーム項目を論理的な順番で整理することは、スムーズで直感的なユーザー体験のために重要です。特にスクリーンリーダー利用者にとっては、順序が大きな影響を与えます。
    フォーム項目の推奨される並び順は、以下のとおりです:


    メールアドレス
    電話番号
  5. フォーム項目にリンクを含める場合は、リンク名が具体的でリンクの目的がユーザーに伝わるようにしてください。
    例として、「クリック Here」や「詳細」などの汎用的な表現ではなく、リンク先の内容に関連した説明的なテキストを使用しましょう。
    1. リンク名がスクリーンリーダーで前後の文脈なしに読み上げられても意味が通じるようにしてください。ユーザーがリンクの目的を周囲のコンテンツと切り離しても理解できる必要があります。
    2. リンクをクリックした際に何が起こるかを示す操作に関連した言葉を取り入れてください。
      例:『詳細』ではなく、『商品詳細を表示』や『サービスの詳細はこちら』などの表現を検討してください。
    3. リンクテキストは明確さを保ちつつ、簡潔にしてください。長く複雑なリンクテキストはユーザーを圧倒し、混乱させる原因となります。
    4. それぞれのリンクに一意で識別可能な名前を設定し、異なるリンク先が混乱しないようにしましょう。
      例:利用規約を読む、商品詳細を表示、お問い合わせ
  6. Zoho Formsで初期設定項目のラベルをカスタマイズすることは、ユーザーにとって分かりやすく使いやすいフォームにするための重要な手順です。ユーザーがフォーム項目に触れた際、それぞれの項目でどの情報が求められているかをすぐに理解できるようにしてください。
    例:メール項目で、ラベルを『メール』から『メールアドレスを入力してください』に変更できます。
    名前項目では、『名前』を『フルネームを入力してください』に変更することができます。
    Customize field name
  7. フォーム作成者が項目にカスタム名を割り当てず、同じ初期設定名の項目が複数存在する場合、支援技術では区別がつかなくなることがあります。アクセシビリティを向上させるために、各項目に固有で分かりやすいラベルを使用し、すべてのユーザーにとって明確で意味のある体験となるよう推奨します。
  8. 分かりやすく作成されたエラーメッセージは、ユーザーフレンドリーかつ直感的なフォームに不可欠です。エラーメッセージのカスタマイズをフォーム設定で行うことで、スクリーンリーダーに頼るユーザーが入力ミスを正しく修正できるよう案内できます。エラーメッセージには、何が問題で、どのように修正すればよいかを明確に説明しましょう。
    例:大きなファイルをアップロードした際に初期設定のエラーメッセージを表示する代わりに、以下のようにしてください。
    アップロードしたファイルが許可されている最大サイズ(5MB)を超えています。サイズの小さいファイルをアップロードしてください。
    1. ユーザーを混乱させるような専門用語の使用は避けてください。
    2. スクリーンリーダーを利用してフォームを十分にテストし、エラーメッセージが視覚障がいのあるユーザーにも効果的に伝わるか確認してください。
  9. 重要な情報を伝える際、プレースホルダーテキストのみに頼るのは避けてください。フォーム送信に必要な重要な詳細は、項目ラベルに含めるか、項目の下部に「説明」プロパティを使って指示を追加してください。各フォーム項目に対して分かりやすく詳細な説明を作成することは、障がいのあるユーザーを適切に案内し、正確なデータ入力を促すために不可欠です。
    例:
    名前項目の場合:公式書類に記載されているとおりフルネームを入力してください。省略形は使用しないでください。
    電話番号項目の場合:10桁の電話番号をスペースやハイフンなしで入力してください。
    ファイルアップロード項目の場合:申請内容を補足するPDFまたはWord形式のドキュメントをアップロードしてください。最大ファイルサイズは5MBです。
    1. 『この項目を入力してください』のような曖昧な説明文は避けてください。
    2. 日付、電話番号、メールアドレスなど特定の形式が必要な場合は、期待される形式を明確に説明してください。
    3. 『特殊文字を入力しないでください』など禁止事項のみを伝えるのではなく、『英数字とハイフンのみ使用できます』など許可される内容を説明してください。
  10. 重要な情報を伝えるためにホバーテキストのみに頼るのは避けてください。フォームの送信に必要な重要な詳細は、項目ラベルに含めるか、項目の指示プロパティを使用して項目の下に説明として記載してください。各フォーム項目に対して明確かつ詳細な説明を作成することは、障害のあるユーザーを効果的に案内し、正確なデータ入力を促すために非常に重要です。
  11. 必須のフォーム項目がある場合は、項目ラベルに「必須」と記載し、スクリーンリーダーがユーザーにそのことを正確に伝えられるようにしてください。ラベルは項目の横ではなく上に配置することで、スクリーンリーダーを利用するユーザーのアクセシビリティが向上します。
  12. フォーム作成で使用するテキストに記号や特殊文字を使用しないでください。
  13. 色は視覚障害のあるユーザーにとってオンラインフォームのアクセシビリティに直接影響します。色のコントラストについて理解しておくべきポイントは次の通りです:
    1. なぜ色のコントラストが重要か
      1. 視覚障害(弱視や色覚障害など)があるユーザーは、背景とのコントラストが十分でないテキストを読むのが困難な場合があります。
      2. 一部のスクリーンリーダーはテキストの色を黒または白に変換して読み上げます。元の内容の色のコントラストが低い場合、変換後にテキストが判読しづらくなることがあります。
    2. Zoho Formsでテーマをカスタマイズすることを検討してください。フォームはミニマルなデザインにするのがおすすめです。
    3. セクションやヘッダーなどで複数の色を使用している場合は、それぞれの色に対してテキストとのコントラストを必ずテストしてください。
    4. 背景画像を使用する場合は、画像の上に配置されたテキストが常に明瞭に読めるようにしてください。
    5. フォーカスがはっきり見えるように、コントラストの高いフォーカスカラーを採用してください。
    6. フォームのボタンについては、ボタンのテキストと背景色の間に十分なコントラストを保ち、視認性とユーザー操作性を高めてください。
  14. フォントの可読性:
    1. 明瞭で読みやすいフォントファミリーを選択し、可読性の高いものを使用してください。装飾的なものや筆記体のフォントは、視覚障害や認知障害のあるユーザーには読みにくい場合があるため避けましょう。
    2. 視覚障害のあるユーザーが快適に読めるよう、十分なフォントサイズを使用してください。非太字テキストは16px、太字テキストは14pxが最小推奨サイズです。
    3. Zoho Formsのテーマ設定でフォントサイズを調整できます。
    4. イタリック体や太字の多用は避けてください。
  15. Zoho Formsではページのズームインが最大200%まで可能です。ズームイン機能を使うことでフォーム項目やテキストが拡大され、視覚障害のある方にもより見やすく、操作しやすくなります。



  16. 長いフォームの場合は、明確なヘッダーで区切ったセクションに分割し、関連する項目をグループ化してください。構造化されたセクションはナビゲーションを明確にし、アクセシビリティを高めます。
  17. 「保存 and 再開する」オプションの有効化は、長いフォームをより管理しやすくし、認知障がいのある方にとって利用しやすくするのに役立ちます。長いフォームは、一度に多くの情報が提示されるため、認知障がいのあるユーザーにとって負担となることがあります。「保存 and 再開する 後で」オプションを利用することで、フォーム記入のプロセスを小さく分割し、段階的に進めることができます。途中で休憩を取り、後から再開することで、ユーザーは集中力や注意力を保ちながら、記入作業を進めることができ、自分でコントロールしているという感覚も得られます。
    Save and resume functionality

  18. 回答者がフォーム送信内容を確認することを許可することで、送信前に記入ミスを見つけることができます。これは特に、集中力や記憶、情報処理に課題のある認知障がいのあるユーザー、または誤字脱字が発生しやすいディスレクシアの方に有効です。
  19. 認知障がいのある方は、フォーム記入時にミスをすることへの不安やストレスを感じやすい場合があります。「編集 Response」オプションにより、初回送信時に発生した誤りやタイプミスを修正できるため、プレッシャーを軽減し、自分で管理できる感覚を高めます。回答の編集が可能なことで、再度フォームの内容を見直したり、必要に応じて追加のリソースやサポートを参照したりしてから再送信することができます。
  20. フォームを多言語に翻訳している場合は、エラーメッセージや選択肢ベースの項目名も必ず各言語に翻訳してください。未翻訳のエラーメッセージや選択肢名はユーザーを混乱させ、問題を誤解したり、意図せず誤った選択肢を選択してしまう可能性があります。
  21. ドロップダウン項目では、検索可能なドロップダウンではなく、初期設定ドロップダウンオプションの使用を推奨します。初期設定のドロップダウンはキーボードの矢印キーで簡単に操作でき、スクリーンリーダーなど支援技術に依存しているユーザーにとって重要です。
  22. リンクの冗長性に注意し、同じ宛先への隣接リンクの数を最小限に抑えるよう配慮してください。Zoho Forms プラットフォームでは隣接するリンクが自動的に統合されることはありませんが、フォーム所有者が不要なリンクの重複を避けることで、ユーザー体験を向上させることができます。
  23. フォーム記入に時間制限(フォーム期限)を設ける場合は、絶対に必要な場合のみとしてください。時間制限が必要な場合は、最小でも20時間に設定し、ユーザーが十分な時間をかけてフォームを記入・送信できるように配慮してください。
  24. フォームが複数のセクションやページで構成されている場合は、説明項目を活用して目次を設けることをお勧めします。これにより、ユーザーはフォーム内で今後何に取り組むかを把握しやすくなります。
  25. フォーム内の全ページで、ページタイトルやナビゲーションボタンの表示を一貫性のあるクリアなラベルにし、分かりやすい表現で統一してください。これにより、複数ページのフォームでもユーザーが使いやすくなります。
  26. 専門用語、慣用句、略語や分かりにくい表現はできるだけ避け、クリアで分かりやすい言語を使用することを推奨します。これにより、ユーザーの理解度とアクセシビリティが向上します。
  27. 複数の読み方がある言葉は必要がない限り使用を避けてください。どうしても使用する場合は、フォームの説明や案内文にふりがなや発音ガイドを記載することを検討してください。
  28. ロゴの表示が必要な場合を除き、テキストを含む画像の使用は避けてください。
  29. モーター障がいを持つユーザーに配慮し、シングルポイントジェスチャーに対応した項目を使用してください。例えば、Zoho Formsの署名項目はドラッグ操作が必要となるため、すべてのユーザーが利用できるとは限りません。フォームで署名項目が必要な場合は、事前に署名済みのドキュメントをアップロードできるようにするなど、代替設定の提供をご検討ください。
  30. フォーム内で同じ情報を繰り返し求めることは避けてください。質問の繰り返しは、特に認知障がいのあるユーザーにとってフラストレーションの原因となります。可能な場合は既知の情報を自動入力する(リダイレクトされたフォームで項目を自動入力する方法)か、条件付きロジックを活用して必要な場合のみ関連項目を表示することをご検討ください。

音声・動画コンテンツのベストプラクティス

  1. 項目ラベルを使用して、その項目が音声または動画コンテンツを含むかどうかを明示してください。
  2. 音声コンテンツには説明項目または項目プロパティ内のInstructionsプロパティを活用し、テキストによる書き起こしを提供してください。動画のみの事前録画コンテンツには詳細説明を記載してください。
  3. 書き起こしや説明文は正確かつ網羅的で、すべてのユーザーがコンテンツにアクセスできるように必要な詳細を含めてください。
  4. 音声項目には、発言内容や重要な非言語的音声を含む完全なテキスト書き起こしを用意してください。
  5. 動画項目には、映像の要素について、動画を視聴できないユーザー向けに詳細な説明を提供してください。
  6. アクセシビリティ向上のため、字幕が有効な動画を埋め込むことを推奨します。動画内の字幕が未完成または不十分な場合は、説明項目や項目プロパティ内のInstructionsプロパティを活用して書き起こし内に字幕を追加してください。
  7. ユーザーが音量の一時停止、停止、調整を個別にコントロールできるようにすることが重要です。これにより、スクリーンリーダーを利用する方や音声環境を制御したい方も、フォームを妨げなく操作できます。アクセシビリティを保つため、音声の自動再生は3秒以内に制限し、再生設定の操作権限をユーザーに持たせてください。
  8. 点滅やスクロールする要素などのコンテンツを埋め込む場合、ユーザーが動きを一時停止または停止できるコントロールを必ず提供してください。YouTube動画の再生や一時停止機能のように、再生コントロールが組み込まれたメディアを埋め込むことを推奨します。これにより、継続的に動く要素とのやりとりが困難な方のアクセシビリティが向上します。
  9. 1秒間に3回を超えるフラッシュを含むコンテンツの埋め込みは避けてください。フラッシュコンテンツが必要な場合は、安全基準を満たし、発作を引き起こすリスクを最小限に抑えてください。
  10. 動画に手話通訳を埋め込むことで、聴覚障がいのあるユーザーもコンテンツを利用できるよう、アクセシビリティ要件を満たしてください。
  11. 音声コンテンツにはバックグラウンド音声を含めないか、バックグラウンド音を会話より少なくとも20デシベル低くしてください。
QuoteZoho Forms チームは、誰でも能力に関係なく Zoho Forms を使って強力なフォームを簡単に作成できるよう、アクセシビリティ機能の提供に多大な努力を注いでいます。Zoho Forms は開発においてユーザー フィードバックを最優先に考え、アクセシビリティも例外ではありません。ユーザーの皆様には、アクセシビリティに関するご意見やご懸念をレポートしていただくことを推奨しており、貴重なフィードバックを心より感謝しております。

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts









                                  • Related Articles

                                  • ウェブアクセシビリティ - WCAG準拠

                                    お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 目次 アクセシビリティとは ウェブアクセシビリティとは WCAG準拠とは アクセシビリティ対応がどのようにヘルプ誰でもに役立つか Zoho Formsをアクセシブルにする重要性 Zoho Formsを誰でも利用できるようにする方法 ユーザーが直面する課題 ウェブアクセシビリティの原則 ...

                                  Resources

                                  Videos

                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                  eBooks

                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                  Webinars

                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                  CRM Tips

                                  Make the most of Zoho CRM with these useful tips.