フォームのアクセシビリティ向上のベストプラクティス

フォームのアクセシビリティ向上のベストプラクティス

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

アクセシビリティに配慮していないフォームの影響

Web アクセシビリティへの関心が高まっているにもかかわらず、オンラインフォームを含むインターネットの多くは、依然として障がいのあるユーザーにとって利用しづらい状態です。これにより、多くの人にとって情報やインタラクティブな体験への大きな障壁が生じています。
  1. 排除:障がいのあるユーザーは、情報へのアクセス、申請の送信、アンケートへの参加、その他フォームに依存するオンラインでの活動から排除されてしまう可能性があります。
  2. ユーザー体験の低下:アクセシビリティに配慮していないフォームに直面すると、ユーザーは不満や落胆を感じ、手続きを途中で放棄してしまうことがあります。
  3. 潜在顧客の損失:フォームがアクセシブルでない場合、企業や組織は貴重なエンゲージメントの機会や潜在顧客を逃してしまう可能性があります。

できること

  1. 認識向上:フォームのアクセシビリティの重要性について認識を高めることが不可欠です。開発者、デザイナー、コンテンツ作成者を含むチーム全体が、アクセシブルなフォームを構築するためのベストプラクティスについて学ぶ必要があります。
  2. ガイドラインの順守:WCAG(Web Content Accessibility Guidelines)など、確立されたアクセシビリティガイドラインに従うことで、インクルーシブな設計・構築が行われたフォームを実現できます。
  3. テストとユーザーフィードバック:障がいのあるユーザーによる定期的なフォームテストと、そのフィードバックをデザインプロセスに反映することは、真にアクセシブルな体験を提供するうえで不可欠です。

Zoho Forms でアクセシブルなフォームを作成する方法


アクセシブルなフォームを作成するための推奨事項を以下にまとめました。

Best practises for creating accessible forms

  1. フォーム名とフォームの説明で、フォームの目的が明確に伝わるようにします。
    1. フォームが何のためのものかが一目でわかる名前を付けます。
    2. 「登録フォーム」のような一般的な名前ではなく、「顧客登録フォーム」や「イベント登録フォーム」のように、より具体的な名前を使用します。
    3. フォームの目的と想定される利用方法を、専門用語や過度に複雑な文を避けて、数文で簡潔に説明します。
    4. 箇条書きで示したい特別な手順や注意事項がある場合は、説明フィールドに記載します。
      例:
      フォーム名:オンライン講座のフィードバック
      フォームの説明:最近受講されたオンライン講座について、率直なフィードバックをお寄せください。皆さまからのフィードバックは、講座内容の改善と、すべての方により良い学習体験を提供するために役立ちます。
  2. WCAG(Web Content Accessibility Guidelines)に基づくフォームのアクセシビリティでは、画像に代替テキストを設定することが重要です。これにより、障がいのあるユーザーも画像の内容を理解できるようになります。
    たとえば、説明フィールドに画像を挿入した場合は、その画像に対して代替テキストを設定します。スクリーンリーダーに依存するユーザーは画像を視覚的に確認できないため、代替テキストで十分な文脈が伝わるようにしてください。また、新しいテーマビルダーでは、バナー画像ヘッダーロゴにも代替テキストを追加できます。



  3. フォームに画像選択フィールドを含める場合は、追加した各画像選択肢に適切な名前を付けてください。「画像 1」「画像 2」のような汎用的な名前ではなく、アクセシビリティとユーザー体験に配慮した名前にすることが重要です。スクリーンリーダーに依存するユーザーは、提示された選択肢を理解するために画像名に頼っています。わかりやすい名前を付けることで、各画像に関する正確な情報が伝わり、ユーザーは適切な選択ができるようになります。
    1. 名前は、画像に何が表示されているかを正確に表すものにします。
    2.  名前が長すぎたり複雑になりすぎたりしないようにします。理解しやすく、覚えやすい名前を心がけてください。
    3. すべての画像選択肢で、一貫した命名形式を使用します。
  4. フォームフィールドを論理的な順序で配置することは、特にスクリーンリーダーを利用するユーザーにとって、スムーズで直感的な操作体験を提供するうえで重要です。
    フィールドを配置する際の推奨される論理的な順序の例:


    メールアドレス
    電話番号
  5. フォームフィールドにリンクを含める場合は、リンクテキストが意味を持ち、ユーザーにリンクの目的が伝わるようにします。
    たとえば、「ここをクリック」「続きを読む」のような一般的な表現ではなく、リンク先の内容に関連した説明的なテキストを使用します。
    1. リンクテキストは、周囲の文脈から切り離してスクリーンリーダーで読み上げられても意味が通じるようにします。つまり、リンク単体でも目的が理解できる必要があります。
    2. リンクをクリックしたときに何が起こるかがわかるよう、行動を示す語句を含めます。
      例:「詳細情報」ではなく、「商品の詳細を表示」「サービスについて詳しく見る」などとします。
    3. リンクテキストは、わかりやすさを保ちつつ簡潔にします。長く複雑なリンクテキストは、ユーザーを混乱させる可能性があります。
    4. それぞれのリンクに固有で識別しやすい名前を付け、異なるリンク先が混同されないようにします。
      例:利用規約を読む、商品の詳細を表示、お問い合わせ など。
  6. Zoho Forms で既定のフィールドラベルをカスタマイズすることは、ユーザーにとってのわかりやすさと使いやすさを高めるうえで重要なステップです。ユーザーは各フィールドを見たときに、どのような情報を入力すべきかをすぐに理解できる必要があります。
    たとえば、メールフィールドでは、ラベルを「メール」から「メールアドレスを入力してください」に変更できます。
    名前フィールドでは、「名前」から「氏名(フルネーム)を入力してください」のように変更できます。
    Customize field name
  7. フォーム作成者がフィールドにカスタム名を設定せず、同じ既定名のフィールドが複数存在する場合、支援技術ではそれらを区別できない可能性があります。アクセシビリティを高めるために、フォーム作成者は各フィールドに固有でわかりやすいラベルを設定し、すべてのユーザーにとって明確で意味のある操作体験を提供することを推奨します。
  8. 適切に作成されたエラーメッセージは、ユーザーフレンドリーでインクルーシブなフォームに欠かせない要素です。フォーム設定でエラーメッセージをカスタマイズし、スクリーンリーダーを利用するユーザーが入力ミスを修正できるように案内しましょう。エラーメッセージでは、「何が問題なのか」「どのように修正すればよいのか」を明確に伝える必要があります。
    例:大きなファイルをアップロードした際に既定のエラーメッセージを表示する代わりに、次のようにします。
    アップロードされたファイルのサイズが、許可されている上限(5 MB)を超えています。5 MB 以下のファイルをアップロードしてください。
    1. ユーザーを混乱させるような専門用語の使用は避けます。
    2. スクリーンリーダーを使用してフォームを十分にテストし、エラーメッセージが視覚障がいのあるユーザーに正しく伝わることを確認します。
  9. 重要な情報を伝える手段としてプレースホルダーテキストのみに依存しないでください。送信を正しく完了するために必要な重要な詳細は、フィールドラベルに含めるか、フィールドの[説明]プロパティを使用してフィールドの下に案内文として表示します。 各フォームフィールドに対して明確で具体的な説明を用意することは、障がいのあるユーザーを適切に案内し、正確なデータ入力を促すうえで非常に重要です。
    例:
    名前フィールドの場合:公的な書類に記載されているとおりの氏名(フルネーム)を入力してください。省略形は使用しないでください。
    電話番号フィールドの場合:スペースやハイフンを入れずに 10 桁の電話番号 を入力してください。
    ファイルアップロードフィールドの場合:申請内容を補足する PDF または Word 形式のドキュメントをアップロードしてください。最大ファイルサイズは 5 MB です。
    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. 「保存して再開」オプションを有効にすることは、長いフォームをより管理しやすくし、認知障がいのある方にも利用しやすくするのに役立ちます。長いフォームは、一度に提示される情報量が多いため、認知障がいのあるユーザーを圧倒してしまうことがあります。「保存して後で再開」オプションにより、フォーム入力のプロセスを、より小さく管理しやすいステップに分割できます。途中で休憩し、後から再開できることで、フォーム入力中も集中力と注意力を保ちやすくなり、コントロール感や自律性の向上にもつながります。
    保存して再開機能

  18. 送信前に回答内容を確認できるようにすることは、入力中に発生した誤りを送信前に見つけて修正するのに役立ちます。これは特に、集中力や記憶、情報処理に課題のある認知障がいのあるユーザーや、入力時の誤字・脱字や不正確さに悩みやすいディスレクシアのあるユーザーに有用です。
  19. 認知障がいのある方は、誤入力への不安から、フォーム入力時に高いストレスや不安を感じる場合があります。「回答を編集」オプションは、初回送信時に発生した誤りや誤字を修正できるようにすることで、プレッシャーを軽減し、コントロール感を高めます。回答を編集できることで、フォームに再度アクセスして質問内容を見直したり、必要に応じて追加の情報源やサポートを確認したりしたうえで再送信できます。
  20. フォームを複数言語に翻訳している場合は、エラーメッセージや選択式項目の選択肢名も、それぞれの言語に翻訳されていることを必ず確認してください。翻訳されていないエラーメッセージや選択肢名は、ユーザーを混乱させる原因になります。問題の内容を誤解したり、意図せず誤った選択肢を選んでしまう可能性があります。
  21. ドロップダウン項目では、検索可能ドロップダウンではなく、既定のドロップダウンオプションを使用することをお勧めします。既定のドロップダウンはキーボードの矢印キーで簡単に操作できるため、スクリーンリーダーなどの支援技術に依存しているユーザーにとって重要です。
  22. リンクの重複に注意し、同じ遷移先への隣接リンクの数を最小限に抑えるようにしてください。Zoho Forms プラットフォーム自体は隣接するリンクを自動的に 1 つのリンクにまとめることはありませんが、フォーム所有者が意識的に不要なリンクの重複を避けることで、ユーザー体験を向上させることができます。
  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 は、開発方針を決定するうえでユーザーからのフィードバックを最優先としており、アクセシビリティも例外ではありません。ユーザーの皆さまからのアクセシビリティに関するご意見・ご報告を歓迎するとともに、貴重なフィードバックをお寄せいただけることに感謝いたします。