ARIA in HTMLでは、要素の名前付けの可否について次のようにある。
著者は、名前付けできない暗黙のWAI-ARIAロールをもつ要素で、
aria-label
またはaria-labelledby
を指定してはならない。著者由来の名前付けを禁止する暗黙のWAI-ARIAロールは、4. HTMLでARIA属性を使用するための文書適合性要件で特定されたHTML要素で特定される。次のマークアップの例は、著者由来の名前付けを禁止する暗黙のARIAロールをもつHTML要素の選択を示す。
例14:著者由来の名前付けを禁止する暗黙のARIAロールをもつ要素
<!-- DO NOT do the following! --> <p aria-label="...">...</p> <span aria-label="...">...<span> <code aria-label="...">...<code> <div aria-labelledby="...">...</div>
つまり、aria-label
属性やaria-labelledby
属性を適用できる要素の種類は決まっていて、何にでもつけられるわけじゃない。名前付けができないロールは次のように定義されている。
5.2.8.6 名前を付けることができないロール(名前は禁止されている)
— 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-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>