【Web Accessibility】aria-labelledby

aria-labelledby について調べた

developer.mozilla.org

aria-labelledby属性は、それが適用される要素にラベルを付ける要素 (または複数の要素) を識別する

例えば、HTMLの<input type="checkbox">に対して<label>を使うと、その要素にラベル要素を関連づけることができる

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the Terms and Conditions.
</label>

これをHTMLでサポートしていない複数の要素の間で関連づけたいときにaria-labelledby属性を使用する

例えば、以下のような両方<span>で構成される兄弟要素で、片方を疑似的なチェックボックスとしたときのな名前を提供するために使用

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

アクセシビリティツリーをみると以下のように関連づけられていることが確認できる 　

また、aria-labelledby属性には複数の要素を指定でき、並べた順にnameを作る

<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>There are over 50 ARIA states and properties, but 13 of them stand out &helip;
  <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>

この場合、nameはread more 13 ARIA attributes you need to knowとなる

順番を間違えないようにすることが大事