画面に見えるラベルの文字を、操作部品の名前にも含める。

05条件と補足

見えるラベルとアクセシブルな名前

アクセシブルな名前は支援技術が部品を識別するために使う名前です。HTMLのボタンでは通常、ボタン内の文字が名前になります。入力欄は関連付けたlabel要素の文字を名前にできます。

aria-labelやaria-labelledbyを使うと、これらの文字に優先して名前を指定できます。属性に何かを書いたかだけでなく、実際に計算された名前を確認します。HTMLのname属性はフォームのデータを扱うためのもので、ここでいう名前とは別です。

名前に説明を加える場合

見えるラベルの文字を、同じ順序のひとまとまりとして名前に含めます。例えばラベルが「検索」で、名前が「検索 写真教室」なら、見える文字を含んでいます。

ラベルの文字を名前の先頭に置くのは推奨される方法です。先頭にあること自体を、この基準の必須条件とはしません。説明を別に伝える方法もあり、aria-describedbyによる説明は名前には含まれません。

適用する範囲

この基準は文字又は文字画像を含む可視ラベルがある部品に適用します。文字ラベルのない操作用アイコンにも目的を伝える名前は必要ですが、その扱いは1.1.1「非テキストコンテンツ」などで確認します。

太字を表す「B」のように、文字を記号として使う場合は、その文字を読むことがラベルの意味とは限りません。英字の大文字・小文字や通常の句読点の違いも、単純な文字列の完全一致だけでは判断しません。

ラベルや入力の説明があるかは3.3.2「ラベル又は説明」、リンクの目的が分かるかは2.4.4「リンクの目的 (コンテキスト内)」でも確認します。