フォームのアクセシビリティを確認してください

ワールドワイドウェブコンソーシアム(W3C)が開発したWCAGアクセシビリティ基準 は、障害のある人を含むすべての人にウェブコンテンツを提供することを目的としています。

フォーム作成時にこれらの基準を守ることで、ユーザーの体験が大幅に向上し、法的基準の遵守を確保し、会社の倫理的価値観と整合します。アクセシビリティを優先することで、包摂性へのコミットメントを示し、将来の成長とイノベーションの強固な基盤を築くことができます。

フォームは以下のアクセシビリティ基準の遵守を保証します:

• Keyboard navigation - フォーム要素はキーボードからアクセス可能で、論理的なタブ順と見えるフォーカスインジケーターを備えています。

• スクリーンリーダー互換性 - コントロールは正しくラベル付けされ、スクリーンリーダーによって通知されます。ナビゲーションボタンやエラーメッセージの説明的なアリアラベルも含まれます。

• フォームラベルと指示 - フィールドには目に見えるプログラムに関連付けられたラベルと明確な指示があります。

• Error handling - エラーメッセージは明確で具体的で、関連するフィールドにリンクされています。また、色覚異常の方を支援するためにエラーメッセージにアイコンが追加されています。

• Input assistance - フォームはブラウザが提供する オートコンプリート 機能をサポートし、キーボードやスクリーンリーダーを通じてカスタム入力がアクセス可能であることを保証します。例えば、フォームのユーザーが 名前、メールアドレス、住所などの欄にテキストを入力すると、ブラウザは以前に入力したデータに基づいて関連する提案を提供します。

  !注フリーテキストの 自動補完 機能を利用するには、関連するフィールドのフィールドタイプとフィールドサブタイプを設定する必要があります。

• ARIA attributes - フォームはカスタム要素に適切なARIAロールと属性を使用し、動的なコンテンツアナウンスを含みます。

• Responsive design - アクセシビリティは様々なデバイスや画面サイズでテストされます。

フォームがすべてのフォームに自動的に実装する標準に加え、いくつかのアクセシビリティ基準はフォームのデザインに依存します。フォームのデザインがアクセシビリティ基準を満たしているかを確認するために:

1. 右上に をクリックすると、フォーム全体のアクセシビリティチェックを開始します。詳細なレポートが数秒以内に生成されます。フォーム内で見られる可能性のあるWCAGレベルAのアクセシビリティ問題を以下の色コードで概説しています:
   • 緑色のマークは、フォームがアクセシビリティ基準を満たしていることを示します。
   • 黄色いマークは機能がアクセシビリティ基準を満たしていないことを示し、通知テキストには問題の説明が含まれています。
2. 黄色マークの通知については、ターゲットアイコンをクリックすると、注意が必要な正確なフィールド項目にリダイレクトされます:
   • 画像からオルトテキストが欠け ている - すべての画像要素にスクリーンリーダーで読み取れる説明的な代替テキストを追加し、画像の内容と目的を伝えます。
   • ラベルがフィールドに欠け ている - 各入力フィールドにその目的を表す対応する label 要素を持たせ、ラベル(例えば電話、メールなど)をスクリーンリーダーで通知できるようにします。
   • エレメントのテキストのコントラストが低い - テキストと背景色のコントラストを、通常のテキストで4.5
     、18ptを超えるテキストで3
     、太字で14ptの最低コントラスト比を満たすようにします。
   • リンク欠如の説明文 - リンクテキストがリンクの目的地や目的を明確に説明していることを確認してください(例: 「ここをクリック 」や 「続きを読む」は避けてください)。
3. アクセシビリティチェックを実行する前にアクセシビリティの問題を修正し、WCAGアクセシビリティ基準の適合基準を満たすまで指示を繰り返してください。

!注Desktop ViewとMobile Viewのアクセシビリティチェックは別々に行う必要があります。