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

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

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

目次

アクセスできないフォームの結果

ウェブアクセシビリティに対する注目が高まる中、インターネット上の大きな部分、オンラインフォームを含め、障害を持つユーザーにとって未だアクセス不能な状態です。これは多くの人々にとって情報とインタラクティブな体験の障壁となっています。
  1. 排除:障害を持つユーザーは情報へのアクセス、アプリケーションの送信、調査への参加、またはフォームに依存するその他のオンライン操作から排除されます。
  2. 否定的なユーザー体験:アクセス不可能なフォームに直面することは、ユーザーにとってイライラさせるだけでなく落胆させます。これにより、多くのユーザーが手続きを途中で諦めることになります。
  3. 潜在顧客の損失:フォームがアクセス不可能である場合、ビジネスや組織は重要なエンゲージメントの機会や潜在顧客を逃してしまう可能性があります。

どんな操作をすればよいですか?

  1. 意識向上:フォームのアクセシビリティの重要性について意識を高めることが不可欠です。開発者、デザイナー、およびコンテンツ作成者を含むチーム全体が、アクセシブルなフォームを構築するためのベストプラクティスを教育すべきです。
  2. ガイドラインの遵守:WCAG(Web Content Accessibility Guidelines)などの確立されたアクセシビリティガイドラインを順守することにより、フォームが包括性を心に設計・構築されるようにします。
  3. テストとユーザー フィードバック:障害を持つユーザーとの定期的なフォームテストと彼らのフィードバックを設計プロセスに取り入れることは、本当にアクセスしやすい体験を創造するために重要です。

Zoho Formsを使用したアクセシブルなフォームの構築方法


アクセシブルなフォームを作成するためのいくつかの提案です。

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

  1. フォーム名とフォームの説明がフォームの目的を正確に伝えることを確認してください。
    1. フォームの目的を明確に示す名前を目指してください。
    2. 「登録フォーム」というよりは、「顧客登録フォーム」や「イベント登録フォーム」のようなもっと具体的なものを選ぶ方が良いでしょう。
    3. フォームの目的と意図された使用法をシンプルな文で簡潔に述べてください。専門用語や複雑な文章は避けてください。
    4. ユーザーが知っておくべき特定の指示や要件がある場合、それを箇条書きの一覧として説明欄に含めてください。
      例:
      フォーム名:オンラインコース フィードバック
      フォーム説明:最近のオンラインコース経験に関するあなたの本物のフィードバックを共有してください。あなたのフィードバックにより私たちはコースを改善し、すべてにとって優れた学習体験を提供できます。
  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. 使い勝手の良いエラーメッセージは、ユーザーに優しいフォームの重要な構成要素です。エラーメッセージをカスタマイズすることで、画面リーダーに頼るユーザーがフォーム入力時の間違いを正しく修正できるよう導きます。エラーメッセージは何が間違っていたのか、そしてどのように修正すればいいのかを説明するべきです。
    たとえば、大きいファイルのアップロードに対する初期設定のエラーメッセージの代わりに、次のように考えてみてください:
    あなたがアップロードしたファイルは、許可されるサイズリミットの5MBを超えています。もっと小さいファイルをアップロードするよう試してください。
    1. ユーザーに混乱を招くような技術用語の使用は避けてください。
    2. 画面リーダーを用いてフォームをしっかりとテストし、視覚障がいを持つユーザーにもエラーメッセージが効果的に伝わるようにしてください。
  8. 重要な情報を伝達するためにプレースホルダーテキストに頼ることは避けてください。フォームの成功的な送信に必要な詳細は、ラベルに含めるか、項目の下に指示を提供することが重要です。各フォーム項目に明確で詳しい指示を作成することは、障害を持つユーザーを効果的に導くために不可欠であり、正確なデータ入力を保証する上で極めて重要です。
    例えば、
    名前 項目には、次のようにしてください:公式ドキュメントに表記されるフルネームを入力してください。略語は使用しないでください。
    電話番号 項目には、次のようにしてください:スペースやハイフンを入れずに 10桁の電話番号 を入力してください。
    File アップロードする 項目には、次のようにしてください:申請を支援するためのドキュメントをPDFまたはWord形式でアップロードしてください。ファイルの最大サイズは5MBです。
    1. 「この項目に記入する」といった指示には、一般的な「取引明細」という言葉を避けるようにしてください。
    2. 項目が特定の形式を要求する場合、例えば日付、電話番号、またはメールアドレスなど、期待される形式を明確に説明してください。
    3. 何をしないか(「特殊文字を入力しないでください」)を述べるのではなく、何が許されるか(「英数字とハイフンのみを使用してください」)を説明してください。
  9. 必須のフォーム項目がある場合は、ユーザーにとって明瞭に伝わるように項目ラベルに「必須」というテキストを含めてください。スクリーンリーダーを利用するユーザーにとってのアクセシビリティを向上させるために、ラベルはフィールドの横ではなく上に配置します。
  10. フォーム作成時には、シンボルや特殊文字を使用しないでください。
  11. 色は、視覚障害を持つユーザーにとってオンラインフォームのアクセシビリティに直接影響します。色のコントラストについて理解する必要があります:
    1. なぜ色のコントラストが重要か
      1. 視覚障害のあるユーザーは、背景とのコントラストが低いテキストを読むことに苦労する場合があります。
      2. 一部のスクリーンリーダーはテキストの色を黒または白に変えるだけであり、元の内容の色のコントラストが低いと、変換後にテキストが読みにくくなる可能性があります。
    2. Zoho Formsでは、フォームのミニマリスティックなデザインを維持することを推奨しますので、テーマのカスタマイズを検討してください。
    3. 複数の色を使用するセクション、ヘッダーなどのフォームでは、テキストの色のコントラストを各色に対してテストすることが重要です。
    4. 背景画像を取り入れているフォームでは、画像の上でもテキストがはっきりと読めることを確認してください。
    5. フォームのボタンについては、良い色のコントラストを確保して、ボタンテキストとボタン背景色の間で可視性とユーザーインタラクションの向上を図ってください。
  12. フォントの可読性:
    1. 明瞭で読みやすいフォントファミリーを選択し優れた可読性が得られるようにしてください。視覚障害者や認知障害のあるユーザーにとって読み難い装飾的なフォントや筆記体フォントの使用は避けてください。
    2. 視覚障害を持つユーザーが快適に読むことができる十分に大きなフォントサイズを選ぶことが望まれます。推奨される最小フォントサイズは、太字でないテキストでは16px、太字テキストでは14pxです。
    3. Zoho Formsのテーマ設定内でフォントサイズを変更することができます。
    4. 斜体や太字テキストの使用を過度に行わないでください。
  13. Zoho Formsはページズームを200pxまで提供しています。ズームインすると、フォームのフィールドやテキストが拡大され、視覚障害者が見て触れるのがより容易になります。



  14. フォームが長い場合は、明瞭なヘッダーを持つセクションに分け、関連するフィールドをそれぞれの下にグループ化してください。適切に構造化されたセクションは、明瞭なナビゲーションポイントを提供し、アクセシビリティが向上します。
    1. 「保存と再開する」機能の有効化は、長いフォームを扱いやすくし、認知障がいを持つ人々にアクセスしやすくなるよう支援します。長いフォームは、一度に提示される情報量が多いため、認知障がいのあるユーザーに圧倒されがちです。この「保存して後で再開する」オプションを利用することで、フォームの入力プロセスを小さな段階に分け、処理しやすくすることができます。休憩を取りつつ作業を再開することで、ユーザーはフォームの記入プロセスにおいて、集中力と精度を保ちつつ、コントロール感と自主性を育むことができます。
      Save and resume functionality

    2. 回答者がフォーム提出内容を確認することを許可することは、記入した内容に間違いがないかどうかを確認する機会を与えることができ、特に認知障がいがあるユーザーや、集中力、記憶力、情報処理に課題を持つ人々、また入力情報にタイプミスや不正確さが生じやすいディスレクシアを持つ人々にとって有効です。
    3. 認知障がいを持つ個人は、フォームの入力時にミスをすることへの懸念から、ストレスや不安を感じやすいです。「回答を編集する」オプションは、初期提出プロセスで生じたエラーやタイプミスを修正する権限を彼らに与え、プレッシャーを減らし、コントロール感を促進します。回答を編集する能力は、フォームを再度検討し、質問を確認し、再提出の前に追加リソースやサポートを求める機会を与えます。
    4. フォームを異なる言語に翻訳している場合、エラーメッセージや選択ベースのフィールド内の選択肢名も、それぞれの言語に翻訳されていることを確認してください。翻訳されていないエラーメッセージや選択肢名はユーザーにとって混乱の原因となり、問題を誤解したり意図しない選択をしてしまう可能性があります。
    5. ドロップダウン項目において、検索可能なドロップダウンよりも初期設定のドロップダウンオプションを使用することを推奨します。初期設定のドロップダウンは、キーボードの矢印キーを使って簡単にナビゲートできるため、スクリーンリーダーのような支援技術に頼るユーザーにとって重要です。
    6. リンクの冗長性に注意し、同じ目的地への隣接するリンクの数を最小限に抑えるよう努めてください。Zoho Formsプラットフォームは、隣接するリンクを単一のリンクに結合する機能を本質的に持っていませんが、フォームの所有者は、リンクの不必要な重複を意識的に避けることでユーザー体験を向上させることができます。
    7. フォームの入力に時間制限(フォームの期限)を設定しないようお願いします。どうしても時間制限を設定する必要がある場合は、ユーザーがフォームの記入と提出をするのに十分な時間として、最低20時間以上に設定してください。
    8. セクションや複数ページが含まれるフォームにおいて、目次を説明項目を使用して組み入れることを検討してください。これにより、ユーザーがフォームを通じて案内されます。
    9. 複数ページのフォームでは、全てのページでナビゲーションボタンのラベルが一貫しており、明確かつ情報に富んだ言葉で記されていることを確認してください。
    10. 専門用語、慣用句、略語やフレーズの使用は避けてください。クリアで直截的な言語が、ユーザーの理解とアクセシビリティを向上させます。
    11. ロゴの表示に不可欠でない限り、テキストが含まれている画像の使用は避けてください。
QuoteZoho Forms チームはアクセシビリティ機能を提供するために相当な努力をしており、誰でもがZoho Formsを使用して強力なフォームを簡単に作成できるようにしています。能力に関係なく。Zoho Formsは開発プロセスにおけるユーザー フィードバックを重視しており、アクセシビリティもいいえ例外ではありません。我々はユーザーからのアクセシビリティに関する懸念事項のレポートを奨励し、私たちのユーザーからの貴重なフィードバックを高く評価しています。


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

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

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

    Zoho CRM Training



              Zoho WorkDrive Resources



                Zoho Desk Resources

                • Desk Community Learning Series


                • Digest


                • Functions


                • Meetups


                • Kbase


                • Resources


                • Glossary


                • Desk Marketplace


                • MVP Corner


                • Word of the Day









                                  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.