Caution
This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.
フォーム・コントロールのラベル付けの必要性
例えばあるエディット・フィールドがなにを入力するためのものなのかなど、フォーム・コントロールの目的が分かるようにラベル付けをする必要があります。
画面表示を見ることができる場合、フォーム・コントロールの目的は周囲のテキストとの位置関係から容易に推測することが可能な場合も多いですが、スクリーン・リーダーを利用している場合、位置関係を正確に把握することが困難な場合も多く、結果としてフォーム・コントロールの目的を判断することも困難になってしまいます。フォーム・コントロールと周囲のテキストを明示的に関連付ける（ラベル付けする）ことによって、スクリーン・リーダーなどの支援技術は、そのフォーム・コントロールの目的をユーザーに伝えることができます。
ラベル付けに際しては、実際に画面に表示されているテキストをラベルとして用いることが、画面表示を見ることができるユーザーと、スクリーン・リーダーを利用しているユーザーのコミュニケーションを円滑にすることにつながります。また、画面上のテキストがラベルとして用いられていると、音声入力を利用している場合に目的のフォーム・フィールドを音声で指定しやすくなる可能性が高くなります。
一方非表示のテキストは、コンテンツの修正の際などに修正し忘れるリスクもあります。
こういったことから、なるべくlabel要素やaria-labelledby属性を用いて、表示されているテキストをラベルとして活用することが望ましく、aria-labelledby属性で非表示のテキストをラベルとして用いること、aria-label属性を使うことは避けるほうが良いでしょう。