aria-label属性は何にでもつけられるわけじゃない

ARIA in HTMLでは、要素の名前付けの可否について次のようにある。

著者は、名前付けできない暗黙のWAI-ARIAロールをもつ要素で、aria-labelまたはaria-labelledbyを指定してはならない。著者由来の名前付けを禁止する暗黙のWAI-ARIAロールは、4. HTMLでARIA属性を使用するための文書適合性要件で特定されたHTML要素で特定される。

次のマークアップの例は、著者由来の名前付けを禁止する暗黙のARIAロールをもつHTML要素の選択を示す。

例14：著者由来の名前付けを禁止する暗黙のARIAロールをもつ要素

<p aria-label="...">...</p>

<span aria-label="...">...<span>

<code aria-label="...">...<code>

<div aria-labelledby="...">...</div>

— ARIA in HTML 日本語訳 § 4.1 要素に名前を付けるためのARIA属性の使用に関する要件

つまり、aria-label属性やaria-labelledby属性を適用できる要素の種類は決まっていて、何にでもつけられるわけじゃない。名前付けができないロールは次のように定義されている。

5.2.8.6 名前を付けることができないロール（名前は禁止されている）

caption

code

deletion

emphasis

generic

insertion

paragraph

presentation

strong

subscript

superscript

— Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 § 5.2.8.6 名前を付けることができないロール（名前は禁止されている）

HTML要素にはそれぞれデフォルトのロール（暗黙のWAI-ARIAロール）が定義されているが、例として挙げられているp要素、span要素、code要素、div要素のロールはこの名前をつけることができないロールに該当する。

逆に、これらに該当しないロールであれば、名前付けをすることは妥当とみなされる。

次のマークアップの例は、著者由来の名前付けを可能にする明示的なWAI-ARIAロールを持つ要素を示す。これらの要素で指定される明示的なロールのために、aria-labelおよびaria-labelledby属性は許可される。

例15：著者由来の名前付けを可能にする明示的なARIAロールをもつ要素
<p role="link" tabindex="0" aria-label="...">...</p>

<span role="button" tabindex="0" aria-label="...">...<span>

<div role="article" aria-labelledby="...">...</div>

— ARIA in HTML 日本語訳 § 4.1 要素に名前を付けるためのARIA属性の使用に関する要件

では、名前付けができないロールに対してaria-label属性を使用することは何が問題か。それは、ブラウザや支援技術において安定して動作しないことである。仕様では要素は著者由来の名前をサポートしないと明言されており、基本的にブラウザや支援技術はこれに則って実装される。一部の実装ではこの限りではないが、あくまでそれは例外であり、サポート状況の幅広さや前方互換性の観点で堅牢さに欠ける。

しかし、そのように使用したい場面が存在することもまた事実である。たとえば、スタイリングの都合により、文字を一文字ずつ分割してspan要素で囲うような場合。このように分割されたノードは、利用環境によっては連続した文字列として正しく読み上げられないことがある。そのための対処としてaria-label属性がよく使用される。

<!-- 次のようにしてはならない！ -->
<p aria-label="Lorem ipsum">
  <span aria-hidden="true">L</span><span aria-hidden="true">o</span><span aria-hidden="true">r</span><span aria-hidden="true">e</span><span aria-hidden="true">m</span>
  <span aria-hidden="true">i</span><span aria-hidden="true">p</span><span aria-hidden="true">s</span><span aria-hidden="true">u</span><span aria-hidden="true">m</span>
</p>

この場合の妥当な代替策は、visually hiddenを使うことだ。次のようにすれば、aria-label属性を使うことなく代替コンテンツを設定できる。

<style>
  .visually-hidden {
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
</style>

<p>
  <span class="visually-hidden">Lorem ipsum</span>
  <span aria-hidden="true">L</span><span aria-hidden="true">o</span><span aria-hidden="true">r</span><span aria-hidden="true">e</span><span aria-hidden="true">m</span>
  <span aria-hidden="true">i</span><span aria-hidden="true">p</span><span aria-hidden="true">s</span><span aria-hidden="true">u</span><span aria-hidden="true">m</span>
</p>