A11y のヒント: ラベルとフォーム コントロールのバインド

HTML コードで autocomplete 属性が使用されている場合でも、どのフィールドが入力されているかをユーザーがいつでも知ることができるように、すべてのフォーム コントロールには常に表示可能なラベルが必要です.

アイコンは、適切にラベル付けされている限り、可視ラベルにすることもできます.

したがって、for の <label> 属性をフォーム コントロールの id 属性に使用して、常にラベルをフォーム コントロールにバインドすることを忘れないでください.

<label for="name">Name</label>
<input type="text" id="name" name="name">

このようにして、3 つの利点が得られます.

<label> をクリックすると、関連付けられたフォーム コントロールがフォーカスを受け取るため、フォーム コントロールをアクティブにする領域が大きくなります.

音声ブラウザーがフォーム コントロールにフォーカスを与えると、それに関連付けられている <label> がアナウンスされます.

音声認識ソフトウェアを使用しているユーザーは、関連付けられている <label> の名前を言うことで、フォーム コントロールをアクティブにすることができます.

特殊なケースとして、正しい <input type="button"> 属性を含む value があります.これには、一部の支援技術がフォーム コントロールを解析する方法を妨げる可能性があるため、ラベルを関連付けない方がよいでしょう.同じことが <button> にも当てはまります.