フォームのアクセシビリティ要件として、第一にラベルとコントロールを関連付けるということが必要です。この関連付けによって、スクリーンリーダー利用者は [tab] キーで入力枠等を移動していった場合に何を入力あるいは選択すればいいか分かります。また、マウスを使ってる場合はラベルのテキストをクリックすればコントロールをフォーカスでき、特にラジオボタンやチェックボックスの選択が容易になります。

しかし、CMS によってシステム的にフォームが出力される場合や、メルマガ配信サービスで出力される HTML を貼り付ける場合に、このラベルとコントロールの関連付けがなされていない場合があります。ラジオボタンやチェックボックスについては、暗示的なラベル付け（コントロールとラベルをまとめて label 要素で囲む）によって関連付けされていることが多いですが、テキストフィールドやセレクトメニューについては関連付けされていない場合があります。

最近上記のような事例があり、フロント側で HTML を編集することもできないため、jQuery を使って関連付けを設定してみました。フォームはよくあるテーブルによるマークアップの単純なもので、一行テキストフィールド、複数行テキストエリア、セレクトメニューに対して、ラベルとの関連付けを設定します。

考え方としては、各コントロールに入力された値を送信するための name 属性の値を取得し、これを id 属性の値としてコントロールの要素に新たに追加します。そして、このコントロールに対応するラベルテキストを label 要素で囲み、for 属性に name 属性の値（= id 属性の値）を設定します。

但し、name 属性の値が日本語などの全角文字だったり、”[]” など id 属性の値として使用することができない記号類が含まれている場合は、取得した name 属性の値をエンコード処理したり、正規表現を使って記号を取り除くなどして整形する必要があります。

$(function(){
  $('form input:text, form select, form textarea').each(function(){
    var target = $(this).attr('name');
    $(this).attr('id', target);
    $(this).parent('td').prev('th').wrapInner('<label for="' + target + '" />');
  });
});

テーブルでなく、記述リスト（定義リスト）でマークアップされている場合は、5行目を以下のように書き替えれば対応可能かと思います。

    $(this).parent('dd').prev('dt').wrapInner('<label for="' + target + '" />');

テーブルや記述リストではなく、ラベルとコントロールをまとめて p 要素や div でマークアップされている場合は工夫が必要な場合があると思います。

なお、ラジオボタンやチェックボックスが関連付けされていない場合の対処については、それぞれのコントロールとラベルが何らかのタグで囲まれてないと難しいかもしれません。なぜなら、jQuery で対象のセレクタ（ラジオボタンやチェックボックス）の次にあるテキストを指定する方法が見つからないためです。

また、ラジオボタンはそのグループの name 属性が同じなので、連番を振るなどしてユニークな id 属性の値を設定する必要があります。

出力されるフォームの内容や HTML によっては難しい場合もありますが、フロントエンド技術で少しでもアクセシブルにできればと思います。