フォームのアクセシビリティを確認してください
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ワールドワイドウェブコンソーシアム(W3C)が開発したWCAGアクセシビリティ基準 は、障害者を含むすべての人にウェブコンテンツがアクセシブルになるように設計されています。
フォーム作成時にこれらの基準を守ることで、ユーザーの体験が大幅に向上し、法的基準の遵守を確保し、会社の倫理的価値観に沿うことができます。アクセシビリティを優先することで、包摂性へのコミットメントを示し、将来の成長とイノベーションのための強固な基盤を築くことができます。
Formsは以下のアクセシビリティ基準の遵守を保証しています:
-
Keyboard navigation - フォーム要素はキーボードからアクセス可能で、論理的なタブ順と見えるフォーカスインジケーターを備えています。
-
Screen reader compatibility - コントロールはスクリーンリーダーによって正しくラベル付けされ、通知されます。ナビゲーションボタンやエラーメッセージ用の説明的なアリアラベルも含まれます。
-
Form labels and instructions - フィールドには、目に見えるプログラム的に関連付けられたラベルと明確な指示があります。
-
Error handling - エラーメッセージは明確で具体的で、関連するフィールドにリンクされていること。また、色覚異常の方を助けるためにエラーメッセージにアイコンが追加されました。
-
Input assistance - フォームはブラウザが提供する オートコンプリート 機能をサポートし、キーボードやスクリーンリーダーを通じてカスタム入力にアクセスできるようにしています。例えば、フォームのユーザーがname、email、addressなどの欄にテキストを入力すると、ブラウザは以前に入力されたデータに基づいて関連する提案を提供します。
注記フリーテキストの オートコンプリート 機能を利用するには、関連するフィールドのフィールドタイプとフィールドサブタイプを設定する必要があります。
-
ARIA attributes - フォームはカスタム要素に適切なARIAロールと属性を使用し、動的なコンテンツアナウンスを含みます。
-
Responsive design - アクセシビリティは様々なデバイスや画面サイズでテストされます。
Formsがすべてのフォームに自動的に実装する標準に加え、フォームのデザインによってアクセシビリティ基準も設定されています。フォームのデザインがアクセシビリティ基準を満たしているかを確認するために:
-
右上で
をクリックすると、フォーム全体のアクセシビリティチェックを開始します。詳細なレポートは数秒以内に生成されます。以下の色コードで見られる可能性のあるWCAGレベルAのアクセシビリティ問題をまとめています。-
緑色のマークは、フォームがアクセシビリティ基準を満たしていることを示します。
-
黄色いマークは機能がアクセシビリティ基準を満たしていないことを示し、通知テキストには問題の説明が含まれています。
-
-
黄色マークの通知については、ターゲットアイコンをクリックすると、注意が必要な正確なフィールド項目にリダイレクトされます:
-
Alt text missing from image - すべての画像要素にスクリーンリーダーで読み取れる説明的な代替テキストを追加し、画像の内容と目的を伝えること。
-
Label missing from field - 各入力フィールドにその目的を表す対応するlabel要素を持たせ、ラベル(例えば電話、メールなど)をスクリーンリーダーで通知できるようにすること。
-
Low contrast of element's text - テキストと背景色のコントラストを、通常のテキストで4.5:1、18ptを超えるテキストで3:1、太字で14ptの最低コントラスト比を満たすようにする。
-
Link missing descriptive text - リンクのテキストがリンクの目的地や目的を明確に説明していること(例: click hereやread moreの使用を避ける)。
-
-
アクセシビリティチェックを実行する前にアクセシビリティの問題を修正し、WCAGアクセシビリティ基準の適合基準を満たすまで指示を繰り返してください。
Desktop viewのアクセシビリティチェックを独立して行Mobile viewなければなりません。