Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。

メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。（プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので）

そこで jQuery を使ってラベルによる関連付けを加えてみました。

このフォームは、

  • お客様情報入力（wc_templates/cart/wc_customer_page.php）
  • 発送先入力（wc_templates/cart/wc_delivery_page.php）
  • 新規会員登録（wc_templates/member/wc_new_member_page.php）
  • 会員情報編集（wc_templates/member/wc_member_page.php）

以上の4つのページで使われます。

この4つのテンプレートで、welcart_default テーマでは table 要素に customer_form という共通の class 名が付いています。また、プラグインで出力される対象の要素は、フォームテーブルの tr 要素に “name_row”、”address1_row” など、全て “xxxxx_row” という名前の id 属性が付けられています。

元の HTML ではフォーム部品に id 属性は付けられていますので、この値を取得し、名前や住所、電話番号などの項目を、for 属性にこの値を設定した label 要素で囲みます。

jQuery(function($){
  $('.customer_form tr[id$="_row"]').each(function(){
    var label = $('td:first-of-type :input:first-child', this).attr('id');
    $('th', this).wrapInner('<label for="' + label + '" />');
  });
});

そして、名前とフリガナについては姓と名の入力枠が分かれていますので、それぞれを label 要素で囲み、更にテーブルのセルも別々になっていて扱いにくいので、td 要素を結合しました。

jQuery(function($){
  $('.customer_form tr.inp1').each(function(){
    $('td', this).wrapInner('<label />');
    $(this).html($(this).html().replace(/<\/td><td.*?>/, ''));
    $('td', this).attr('colspan','2');
  });
});