AI要約
マルチページフォームを使用しており、プログレスバーとセクション見出しがより多くのアクセシビリティチェックに合格するようにしたいですか？一部のスキャナーは、プログレスバーのアクセシブルな名前がない、区切りフィールド内の見出しレベルがスキップされているなどの問題を報告しています。
このチュートリアルでは、次のカスタムJavaScriptスニペットを追加する方法を説明します。
- プログレスバーに
aria-labelを追加する - セクション区切り見出しを
h3からh2に変更して、見出しの階層を改善する
始める前に
このチュートリアルは、次のようなマルチページフォーム向けに設計されています。
- プログレスバースタイルのページインジケーターを使用する
- フォーム内に見出しを出力する区切りフィールドを含める
また、サイト固有のプラグインやスニペットプラグインなど、サイトにカスタムPHPを追加する方法も必要になります。
カスタムコードの追加方法がわからない場合は、WPFormsのカスタムPHPスニペットの追加方法に関するガイドを参照してください。
アクセシビリティ修正スニペットの追加
アクセシビリティを向上させるには、以下のコードスニペットを使用してください。これは、フロントエンドでプログレスバーとセクション区切り見出しを更新する小さなスクリプトをサイトフッターに出力します。
スニペットを保存した後、マルチページフォームが含まれるページを開き、プログレスバーが期待どおりに機能することを確認してください。
スニペットの仕組み
最初の関数は、wpforms-page-indicator progressクラスを持つ各要素にaria-labelを追加するため、プログレスバーにアクセシブルな名前が付きます。2番目の関数は、区切りフィールド内のh3見出しを見つけ、それらを同じ属性とコンテンツを持つh2要素として再作成し、元の要素を置き換えて見出しの階層を改善します。
スニペットのカスタマイズ
サイトに合わせてスニペットを調整できます。
ariaラベルテキストの変更
最初のスクリプトブロック内で、この行を更新します。
$(this).attr('aria-label', 'Form Page Progress');
引用符内のテキストを、フォームに適したラベルに変更します。たとえば、次のようになります。
$(this).attr('aria-label', 'Graduation application progress');
これは、スクリーンリーダーがプログレスバーについてアナウンスするテキストです。
特定のフォームのみを対象とする
デフォルトでは、セレクターは次のようになります。
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
サイト上のすべてのWPFormsプログレスバーと区切りに適用されます。
この動作を単一のフォームに制限したい場合は、セレクターにフォームのIDを追加できます。たとえば、フォームID 123の場合は次のようになります。
$('#wpforms-123 .wpforms-page-indicator.progress')
$('#wpforms-123 .wpforms-field-divider h3')
これにより、変更はそのフォームのみにスコープされます。
これで、カスタムJavaScriptスニペットを使用して、マルチページフォームにアクセシブルなプログレスバーと見出し構造をより多く提供する方法を学びました。
次に、WPFormsでマルチページフォームを作成する方法に関するガイドを確認して、ページ分割とページインジケーターの設定に関するすべてのオプションを確認することをお勧めします。