こんにちは！フロントエンドの世界へようこそ。今日は、Webサイトを「誰にとっても使いやすいもの」にするための、ちょっと魔法のような技術のお話をしますね。
HTMLを書いていると、「画面上の文字をJavaScriptで書き換える」という場面によく出会うはずです。例えば、お買い物のカートボタンを押した瞬間に「合計金額」が更新されたり、フォームの送信ボタンを押した後に「送信完了！」と表示されたり。
視覚的に画面を見ている私たちには、文字がパッと変わればすぐに分かりますよね。でも、「画面を見ることが難しい方」が使っているスクリーンリーダー（読み上げソフト）は、その変化に気づけないことが多いんです。
今日は、そんな「見えない変化」をしっかり伝えてあげるためのヒーロー、`aria-live`属性についてお話ししましょう。
—
そもそも「aria-live」って何者？
想像してみてください。あなたは今、大勢の人がいる賑やかなカフェにいます。目の前で友人が何かを一生懸命話していますが、その友人が急に「あ、ごめん。実はさっきから君のスマホに大事な通知が届いてるよ」と教えてくれたら……気づけますよね。
Webの世界での`aria-live`は、まさにその「友人の役割」です。
本来、スクリーンリーダーは上から順に淡々と読み上げていくのが仕事です。しかし、`aria-live`をタグに設定しておくと、「ここ、中身が変わったらすぐ読み上げてね！」とソフトに予約注文を入れることができるんです。
使ってみよう！魔法の属性「aria-live」
使い方は驚くほどシンプルです。HTMLタグの中に、`aria-live`という属性を書き足すだけ。
これだけで、JavaScriptでこの中の数字が書き換わったとき、スクリーンリーダーは「合計金額：1,500円」と、自然に読み上げてくれるようになります。
「polite」と「assertive」の使い分け
`aria-live`には、主に2つの設定値があります。
1. polite（ポライト：礼儀正しい）
- 今読み上げている文章が終わるのを待ってから、「あ、そういえばさっき金額が変わったよ」と伝えてくれます。
- 多くの場合はこれで十分。ユーザーを驚かせず、親切です。
2. assertive（アサーティブ：断固とした）
- 「今すぐ中断して読んで！」という強い命令です。
- エラーメッセージや、制限時間の残り10秒など、一刻を争う情報にだけ使ってくださいね。
実際に動かしてみましょう
小さなサンプルコードを用意しました。ボタンを押すと金額が変わる、お買い物シミュレーションです。
どうでしょう？ `aria-live`を書く前は、ボタンを押してもスクリーンリーダーは黙ったままだったかもしれません。でも、これを入れるだけで、情報の「動き」がしっかり伝わるようになります。
つまずきやすいポイント：ここだけは注意！
初学者の頃、よくやってしまいがちなのが「ページ全体に`aria-live`をつけてしまうこと」です。これをしてしまうと、ページ内のちょっとした変化すべてに反応してしまい、ユーザーは情報の洪水に溺れてしまいます。
「本当にユーザーが気づくべき変化はどこか？」
そう自分に問いかけて、必要な場所にだけピンポイントで設定するのが、プロの腕の見せ所です。
—
最後に：小さな気配りが、大きな体験を作る
Web制作を始めたばかりの頃は、どうしても「見た目」ばかりに目が行きがちですよね。もちろん、デザインも大切です。でも、こうして「情報が正しく伝わるか？」という視点を持てたあなたは、もう立派なエンジニアの卵です。
`aria-live`のような属性は、派手なアニメーションよりもずっと地味かもしれません。でも、その「配慮」こそが、Webを誰にとっても温かい場所にする魔法になります。
ぜひ、今作っているページで「ここ、読み上げられたら嬉しいかな？」と思う場所に、そっと`aria-live`を添えてみてくださいね。きっと、あなたのWebサイトをもっと好きになれるはずですよ。
それでは、また次回の記事でお会いしましょう！応援しています！
コメント