スクリーンリーダーが読み上げ続けるカウントダウンタイマー

リネンの店が秋のセールを開いていて、どの商品ページも「セール終了まで 02:14:09」というバナーで始まります。数字は1秒ずつ減っていきます。開発者は、セールの終わりが近いことをスクリーンリーダーの利用者にも伝えたいと考え、バナーに aria-live="assertive" を付けました。

スクリーンリーダーの利用者がティータオルのページを開き、説明を1行ずつ読みます。JAWS、NVDA、ナレーターでは、行は最後まで読まれ、そのあとに時計が続きます。「手織りのリネンのティータオル。洗いをかけてあり、最初から柔らかな手触りです。02:14:06」。次の行のあとには「02:14:03」。少し手を止めて考えていると、時間が1秒ごとに読まれ続けます。MacやiPadのVoiceOverでは、新しい時間が行を途中で切ります。「手織りのリネンの、02:14:08」と聞こえ、行の残りは読まれません。どちらでも、説明、価格、「カートに入れる」ボタンは、時間と時間の合間に読むことになります。数字の動きで気が散る人にも、止める手段がありません。バナーにはボタンがなく、ページを開いている限り数字は減り続けます。

このバナーには、二つの問題があります。一つは4.1.3です。aria-live="assertive" の領域は、変化のたびにすぐ伝えるようスクリーンリーダーに求め、ARIAは待っていた内容を捨ててもよいとしています。Understanding 4.1.3は、ステータスメッセージを「作業を不必要に妨げない方法で」伝えるべきだとし、重要でも急ぎでもない内容に role="alert" や aria-live="assertive" を使うことを失敗例に挙げています。過ぎたばかりの1秒は、重要でも急ぎでもありません。ただし、スクリーンリーダーがすべて領域の求めどおりに動くわけではありません。2026年のリリースでは、JAWS、NVDA、ナレーターは assertive の領域を polite と同じように扱い、読んでいる文や行が終わってから読みました。割り込んだのは、macOSとiPadOSのVoiceOverです。つまり、変化はすべて読まれ、領域の求めに従うスクリーンリーダーでは、ページの読み上げを押しのけて読まれます。バナーはもともとステータスメッセージではありません。スクリプトが数字を一つ変えるだけなのに、領域がその変化を毎回の読み上げにしています。

もう一つは2.2.2です。カウントダウンは自動更新される情報です。Understanding 2.2.2の言葉では、あらかじめ決めた時間の間隔で更新される内容です。自動で始まり、商品と並んで表示されるため、WCAGは、一時停止、停止、非表示のいずれか、または更新の頻度を調整する手段を求めています。自動更新には、5秒以内なら許されるという例外もありません。Understanding 2.2.2は、こうした内容が「スクリーンリーダーにも問題を起こす」ことがあるとも述べています。この例では、ライブリージョンがまさにそれを引き起こしています。

セールの間はどの商品ページにもバナーがあるため、時間の読み上げは店の中のどこへ行ってもついてきて、セールが終わるまで止まりません。スマートフォンやタブレットでは、スクリーンリーダーの利用者の多くがVoiceOverを使っています（WebAIMの2024年の調査では、モバイルの回答者の70.6%）。先のテストで、macOSとiPadOSで割り込んだスクリーンリーダーです。

10グループ中2グループに影響

• 全盲 （影響あり）
• 弱視 （影響なし）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響なし）
• 届く範囲・力 （影響なし）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない 1行読むたびに新しい時間が読まれ、VoiceOverでは時間が行を途中で切ります。カウントダウンが動いている間は、商品の説明も、価格も、ボタンも、通して読めません。
• 言語・認知・学習の能力が限られる ページの上で毎秒変わる数字に何度も目を引かれ、止める手段もないため、注意の持続が難しい人は、その下の商品の説明を読むのに苦労します。

スキャンは、最初からページにあり、文字の入ったライブリージョンを見て合格にします。その文字が毎秒変わることは、マークアップのどこにも書かれていません。この診断は、ページを操作する前の数秒間、ページを見ています。assertive の領域の中で文字が自動で3回以上変われば問題として報告し、自動で変わり続ける文字は、どの領域にあっても、人が確認する対象として挙げます。ただし、ページの別の場所にある停止ボタンがその文字を止めるかどうかは分かりません。カウントダウンをアクセシブルにするよう頼まれたAIアシスタントは、aria-live を付けることがあり、このバナーもそうして生まれました。role="timer" と一緒に aria-live="assertive" を付けて、割り込みを元に戻してしまう例もあります。カウントダウンが動いている間にページを聞いてみて、初めて問題に気づきます。どう聞こえるかは、スクリーンリーダーによって違います。