`A form label must be associated with a control jsx-a11y/label-has-associated-control`の対処

プロダクトでアクセシビリティチェッカーeslint-plugin-jsx-a11yを導入しています。
その中でも今回遭遇したlabelタグに関するエラーの対処について。

eslint-plugin-jsx-a11y内ではlabelタグがテキストラベルと関連する要素を持っているかを下記で確認しています。

A form label must be associated with a control jsx-a11y/label-has-associated-control

基本的に最新のブラウザではラベルをコントロールに関連づけることが可能。なのでlabelタグでラップしてあげれば良さそう。参照MDN

<label>
  Surname
  <input type="text" />
</label>

下記はこのエラーが発生する例↓

<input type="text" />
<label>Surname</label>

明示的にコントロール要素を指定したい場合。

<label htmlFor={domId}>Surname</label>
<input type="text" id={domId} />

この時、labelタグのfor属性とinputのid属性の値は等しくなければならない。

MDNより引用

ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。つまり、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げ、支援技術のユーザーが何のデータを入力するべきか理解しやすくすることができます。

スクリーンリーダーの読み上げ時に効果的。

関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。こうしてヒット領域を拡大すると、タッチパネルの端末を使用している場合を含めて、入力欄をアクティブ化させやすくなります。

小さなチェックボックスを目掛けて指で画面をタッチするのは難しいけど、対象の枠が広がればクリックしやすくなる。昨今スマホユーザーが利用すること多くなってきているので、ここは重要になってくるかなと思います。

詳しく知りたい方は、こちらの記事が勉強になるかと思います。