「画面が勝手に変わった！」を視覚障がいの方にも伝えたい。HTMLの動的コンテンツとARIA Liveの優しい関係
Webサイトを作っていると、時々「今の状況」をリアルタイムで表示したくなること、ありますよね。
例えば、通販サイトの「残り在庫数」や、スポーツ速報の「現在のスコア」、あるいはフォームに入力した時の「あと何文字入力できます」というカウントダウン。これらは画面を見ている人には一目瞭然ですが、スクリーンリーダー（画面読み上げソフト）を使っている方には、意外と「変化」が伝わりにくいという課題があります。
今回は、そんな「画面の中の小さな変化」を、誰にでも平等に届けるための魔法のスパイス、『ARIA Live（アリア・ライブ）』についてお話しします。
—
なぜ「更新」が伝わらないのか？
まずは想像してみてください。あなたがデパートの案内所で、目の前の電子掲示板をじっと見つめているとします。
「あ、今のうちに残り在庫が1個減ったな」
これなら気づけますよね。でも、もしあなたが目隠しをしていて、そばにいる係員さんが「今の状況」を教えてくれるのを待っているとしたらどうでしょう？ 係員さんが「あ、今のカウント変わりましたよ」とわざわざ言ってくれない限り、あなたは掲示板の中身が書き換わったことに気づけませんよね。
スクリーンリーダーは、いわばこの「係員さん」です。ただ、係員さんはとても真面目なので、「指示がないと、勝手に今の状況を勝手にしゃべってはいけない」というルールで動いています。
このルールを書き換えて、「変わったらすぐに教えて！」と伝えるのが `aria-live` の役割なんです。
—
魔法の属性：aria-live を使ってみよう
`aria-live` は、その要素の中身が書き換わったときに「おい、中身が変わったぞ！」とスクリーンリーダーに通知する役割を持っています。
具体的なコード例
例えば、現在時刻をリアルタイムで表示する `time` 要素があるとしましょう。
現在の時刻：
ポイント解説
- aria-live=”polite”: 「礼儀正しい」という意味です。今読み上げている内容が終わった後に、そっと「今の時刻は〇〇です」と伝えてくれます。ユーザーを驚かせないので、基本的にはこれを使うのがおすすめです。
- aria-live=”assertive”: 「断固とした」という意味です。こちらは「今すぐ中断して伝えろ！」という緊急用。エラーメッセージなど、今すぐ気づいてほしいとき以外には使わないのがマナーです。
—
もう一つの隠し味：aria-atomic
さて、ここで一つ注意点があります。`aria-live` を設定しても、スクリーンリーダーは「変更された部分だけ」を読み上げることがあります。
例えば「残り在庫：10個」が「残り在庫：9個」に変わったとき、「9個」とだけ読み上げられても、何が9個なのか分かりにくいですよね。そこで登場するのが `aria-atomic` です。
残り在庫：10個
こうしておけば、更新のたびに「残り在庫：9個」とセットで読み上げてくれるので、ユーザーは常に正しい文脈を理解できます。
—
最後に：完璧を目指さなくて大丈夫！
ここまで読んで「うわ、覚えること多いな…」と少し不安になったかもしれません。でも、大丈夫ですよ。
最初は「あ、ここ動的に変わるな」と気づくこと自体が、エンジニアとしての大きな成長です。まずは `aria-live=”polite”` を添えてみる。それだけで、あなたのWebサイトは格段に「誰にでも開かれた場所」へと進化します。
Webアクセシビリティは、完成させることよりも「誰かに届けようとする心」が一番大切です。皆さんの書くコードが、画面の向こう側の誰かの助けになりますように。
また一緒に、少しずつ学んでいきましょうね！
コメント