最近、HTMLのアクセシビリティ対応を見直している中で、
<section aria-labelledby="service-heading">
<h2 id="service-heading">サービス</h2>
...
</section>
この構文、一見まわりくどいように感じるんですが、ちゃんと理由があります。
aria-label ではダメなのか？
たとえばこう書いた場合：
<section aria-label="サービス">
<h2>サービス</h2>
...
</section>
ぱっと見はこっちのほうがシンプルに見えます。
でも実務で考えると、ラベルと見出しの2箇所を管理することになるので、変更があったときに片方だけ直し忘れるリスクがあります。
aria-labelledby のほうがいい理由
メンテナンス性が高い
→ 見出しテキストを1か所変えれば、スクリーンリーダーの読み上げも自動で変わる。
情報の一貫性が担保できる
→ 開発者の意図とスクリーンリーダーに伝わる内容が一致する。
セマンティクスがはっきりする
→ 見出しの要素とラベルの要素が明確につながるので、アクセシビリティツールでもセクションの意味を正確に捉えられる。
実際の現場での使い分け指針
| 状況 | 選ぶ属性 |
|---|---|
| セクションに見出し（h2など）がある | aria-labelledby を使う |
| 見出しを表示したくない、 もしくは見た目だけの装飾で意味を持たせたい |
aria-label を使う |
結論：命名の一元化と可読性の両立を意識する
案件をやっていると「これ、あとで文言変わるかも」と思うことって多いですよね。
そういうときに aria-label で書いてしまうと、見た目とスクリーンリーダーで読まれる内容がずれて、修正漏れやバグの温床になります。
なので、自分は今後、以下のルールで書いていくつもりです。
-
基本は aria-labelledby を使って、見出しと役割を紐づける
-
見出しを出したくないときだけ aria-label を使う
今までは「アクセシビリティ対応＝altつけること」くらいの認識でやっていた部分もあったので、
こうした細かい部分からも品質を上げていけるように意識していきたいです。