このシリーズでは今までState of CSS/JS/HTMLやStack Overflow、GitHub、JetBrainsといった「開発者に聞いたアンケート」を出典にしてきました。
今回は少し毛色が違う調査元を使います。
HTTP Archiveの「Web Almanac」、2025年版で実際に1620万件のWebサイトを機械的にクロールして集計した、いわばWeb版の国勢調査です。
aria-label使用率70%、でも「使ってれば安心」ではないらしい
このアクセシビリティの章によると、デスクトップ表示のページの約70%(モバイルは68%)でaria-label属性が使われていました。
数字だけ見ると「アクセシビリティ、けっこう浸透してるじゃん」と思えます。
ただ、同じ章にはボタンの中身の内訳も出ていて、こちらは見方が変わってきます。
ボタンが読み上げられるときの名前は、過半数(デスクトップ57%・モバイル55%)がボタンの中に書かれた文字そのものから来ていて、aria-labelが名前の由来になっているのは28〜29%でした。
この28〜29%には、中身に文字を持たないアイコンのみのボタンにaria-labelで名前を与えているケースと、中身の文字はあるのにあえてaria-labelで上書きしているケースの、両方が混ざっています。
レポート自身も、目に見えるラベルが無いままaria-labelだけでボタンの名前を定義しているケースが、ここ数年で4〜5%ぶん増えていることを気にかけていました。
「使っている」と「正しく使えている」の間には距離がある
aria-labelは、書いただけで効果が出る属性ではありません。
可視ラベルが無いまま名前を付けている場合、音声入力で操作する人は画面に見えている文字を頼りに呼びかけるので、読み上げ名がそれと違うと反応してもらえなくなります。
中身の文字と食い違う文言を付けたときも同じで、見えている文字と読み上げられる内容がズレます。
それでも実際、アクセシブルな名前を一切持たないボタンはデスクトップで9%・モバイルで11%あるとレポートは報告していて、使用率の数字だけでは、こういう漏れも見えてきません。
自分のサイトはどうなってるか、grepしてみた
数字を眺めるだけで終わらせず、自分のテーマファイルを実際にgrepして答え合わせしてみました。
結果、aria-labelが使われていたのは全体でたった2箇所でした。
1つはフッターのSNSフォローリンク、もう1つはYouTube Shorts埋め込みの再生ボタンです。
どちらもアイコンだけで文字を持たない要素で、装飾用のアイコン部分はaria-hidden="true"で隠しつつ、リンクや要素自体には意味のあるラベルを付ける形になっていました。
フッターのSNSフォローリンクは、実際にはこんな形です。
<a class="c-footer-follow__link" href="..." aria-label="Xをフォロー">
<span class="c-footer-follow__icon">
<span class="icon-x" aria-hidden="true"></span>
</span>
</a>アイコン部分はaria-hiddenで読み上げから除外し、リンク全体に「Xをフォロー」という名前を付けています。
ただし今回grepで分かったのは「付けている場所」だけです。
「本当は付けるべきなのに付け忘れている場所」は、文字だけの検索では見つけられないので、そこはまた別に洗い出す必要があります。
70%という数字、実は自分もその内側にいた
最初この2箇所を70%という数字と比べて、「うちは少ない方だな」と思いかけました。
でも考え直すと、これは比較する対象がズレています。
70%は「aria-labelを1つでも使っているページの割合」なので、2箇所とはいえ使っているうちのサイトは、その70%の中に含まれる側です。
本当に見るべきは数の多さではありませんでした。
その70%という括りの中には、うちみたいにアイコンのみの要素に絞った使い方も、本来ボタンの中身の文字だけで足りるのに念のため付け替えている使い方も、両方混ざっています。
たとえば<div role="button" aria-label="送信">送信</div>のように、中身の文字と同じ内容をわざわざaria-labelで付け直しても、意味のある上書きにはなりません。
そもそもこの例なら<button>送信</button>と書けば、roleもaria-labelも要りません。
使用率という数字は、そこまでは教えてくれません。
💡 Tips: ARIAは「付ける数」でなく「付ける場所」で決める
aria-labelはアイコンのみのボタン・リンクなど、視覚的な情報だけでは意味が伝わらない要素に絞って使うのが基本です。
ネイティブの<button>や<label>で足りる場面までroleやaria-labelを後付けしないほうが、実装もシンプルになります。
まとめ
今回はいつもの「開発者の実感を聞いたアンケート」ではなく、実サイトを機械的に調べた客観データを出典にしてみました。
自分のサイトで実際にgrepして、しかも比較の仕方まで一度間違えかけて、初めて数字が自分ごとになった気がします。
