WAI-ARIA の間違った使い方

2025年10月15日 更新

昨今、スクリーンリーダーを用いてウェブサイトの利用をしていると、表示される機能が正しく操作できなかったり、意図通りではない情報がフィードバックされて混乱したりすることがあります。

そうした原因のいくつかには、ウェブサイトにアプリケーションとしての機能を持たせ、それをスクリーンリーダー等でも適切に反映させる技術「WAI-ARIA」の誤った運用が挙げられます。

今回は、誤った WAI-ARIA の使われ方で苦労した話を紹介します。良い開発者さんはマネしないでね！

電子新聞サイトにて…

私は、とある新聞社が運営している電子新聞サービスに無料会員登録をして利用しています。

このサービスは、会員登録をすると、同社が紙面で発行している記事をウェブサイトやスマートフォンアプリで閲覧することができます。そして、会員種別によって、読むことのできる記事の範囲が定められています。

そのサービスが、昨年リニューアルされたのですが、困った問題に直面してしまいました。それは、「どの記事が無料会員で読めるのか？」がわからなくなってしまったことでした。

原因は、 aria-label の誤った使い方

以下は、該当のウェブサイトで遭遇したHTMLコードでした。

問題のあったHTMLコード

<h2>○○社 電力消費を従来比10%削減した新型液晶ディスプレイを発売</h2>
<a href="#" aria-label="2024年10月25日">
公開: 2024/10/25 13:16<br>
タグ: 新製品, 液晶, 電力<br>
執筆: ○○<br>
種別: 有料会員限定記事
</a>

上記コードによる実際の読み上げ

私が使っているスクリーンリーダー (PC-Talker + NetReader) は、上記のコードを以下のように読み上げました。

○○社 電力消費を従来比10%削減した新型液晶ディスプレイを発売 2024年10月25日

掲載時刻、タグ、執筆者、記事種別の情報が消えてしまったのです。

特に「有料会員限定記事」の通知が消えてしまったため、記事が読めるか否かを確認するために、一つ一つリンクを開く必要が生じてしまったのです。とても面倒です。

きっと、制作者は「2024/10/25」がスクリーンリーダーではうまく読まれないだろうと考えて、最低限の変更で、間違いなく日付として読み上げさせたかったのでしょう。

そこで、読み上げ内容を調節できるらしい aria-label を使ってしまったのでしょう。

修正されたコード

私は修正を要望したのですが、どうやら他の人からも同じ要望があったようです。しばらく後、以下のようにコードは修正されました。

<h2>○○社 電力消費を従来比10%削減した新型液晶ディスプレイを発売</h2>
<a href="#">
公開: <span aria-label="2024年10月25日">2024/10/25</span> 13:16<br>
タグ: 新製品, 液晶, 電力<br>
執筆: ○○<br>
種別: 有料会員限定記事
</a>

上記コードによる実際の読み上げ

私が使っているスクリーンリーダーは、上記のコードを以下のように読み上げます。

○○社 電力消費を従来比10%削減した新型液晶ディスプレイを発売 公開: 2024年10月25日 13:16 タグ: 新製品, 液晶, 電力 執筆: ○○ 種別: 有料会員限定記事

ちゃんと、リンクを開く前に、自分の会員種別で閲覧できるのか否かがわかるようになりました。もし、修正されなかったら、「他のサービスに乗り換えよう」と思っていたので、本当に良かったです。

ブラウザーで表示しただけでは違いがわからない

今回紹介した例は、開発中のサイトではなく、公開されていたウェブサイトで起こっていたものでした。そんなことになってしまった原因は…

「ブラウザーで画面表示しただけでは違いがわからない」

ことだと考えています。

WAI-ARIA を用いたアクセシビリティ対応の取り組みは、スクリーンリーダーなど支援技術を使用した時に実感が得られるものが多いです。

逆に言うと、健常な開発者、テスターが、支援技術と組み合わせずにブラウザーを開いて操作しただけでは、気づくのが難しいのです。

このため、アクセシビリティ対応のテストを行なう時には、支援技術を用いて動作を確認することを推奨しています。

昨今のスクリーンリーダーは、読み上げた内容を画面上に表示する機能もありますので、併用することで、理解が容易になるかもしれません。

また、開発環境に含まれているチェックツール、市販されているチェックツールの中には、読み上げのテキストだけを表示できる機能を持つものもあります。それを用いることで、大事なテキストが消えてしまっていないかを確認することも良いでしょう。

ウェブアクセシビリティ対応のために「WAI-ARIA」の利用を考えている、あるいは活用している方。正しく使えているのか？を一度確認してみてはいかがでしょうか？^※1