AIサマリー
複数ページにわたるフォームを使用しており、プログレスバーとセクション見出しのアクセシビリティチェックをより多く通過させたいですか？一部のスキャナーでは、プログレスバーのアクセシブルな名前が欠落していることや、区切りフィールド内の見出しレベルがスキップされているといった問題が報告されています。
このチュートリアルでは、カスタム JavaScript スニペットを追加する方法を説明します。そのスニペットは次のことを行います：
- 追加する
aria-labelプログレスバーへ - セクション区切り見出しを
h3へのh2見出し階層を改善する
始める前に
このチュートリアルは、以下の条件を満たす複数ページフォーム向けに設計されています：
- プログレスバースタイルのページインジケーターを使用する
- フォーム内にヘッダーを出力する仕切りフィールドを含める
サイト固有のプラグインやスニペットプラグインなど、サイトにカスタムPHPを追加する方法も必要になります。
カスタムコードの追加についてサポートが必要な場合は、WPForms用のカスタムPHPスニペットの追加方法に関するガイドをご覧ください。
アクセシビリティ修正スニペットの追加
アクセシビリティの改善を追加するには、以下のコードスニペットを使用してください。これにより、サイトのフッターに小さなスクリプトが挿入され、フロントエンドでプログレスバーとセクション区切り見出しが更新されます。
スニペットを保存した後、マルチページフォームを含むページを開き、プログレスバーが期待通りに動作することを確認してください。
スニペットの仕組み
最初の関数は追加する aria-label 各要素に対して wpforms-page-indicator progress クラスを指定して、プログレスバーにアクセシブルな名前を付与します。2つ目の関数は h3 区切りフィールド内の見出しを、再作成します h2 同じ属性と内容を持つ要素を、見出しの階層構造を改善するために元の要素と置き換えます。
スニペットのカスタマイズ
スニペットを調整して、ご自身のサイトにより適した内容にすることができます。
アリアのラベルテキストを変更する
最初のスクリプトブロック内で、この行を更新してください：
$(this).attr('aria-label', 'フォームページの進行状況');
引用符内のテキストを、フォームに適したラベルに変更してください。例：
$(this).attr('aria-label', '卒業申請の進捗');
これはスクリーンリーダーが進捗バーについて読み上げるテキストです。
特定のフォームのみを対象とする
デフォルトでは、セレクタは：
$('.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で複数ページフォームを作成する方法に関するガイドを確認し、改ページや進行状況インジケーターの設定に関するすべてのオプションをご覧ください。