本文へスキップ
kenjtecJournal
Journal内を検索

AI チャットとスクリーンリーダー:一語ごとに中断せずに回答を読み上げる

増えていく AI のテキストとステータスメッセージは、異なる目的を持っています。小さな HTML パターンを使って、絶え間ない中断なしに状況を把握できるようにする考え方の一つを示します。

首にヘッドホンをかけたアナが、短いステータス用の帯が留められたカードを読んでいる。AIによるイラスト。

回答が一語ずつ増えていきます。目の見える人にとって、これは進行状況のように見えます。しかし断片がすべて即座に読み上げられると、同じ出力が絶え間ない中断につながる可能性があります。したがって問題は、変化が技術的に見えるかどうかではなく、その時点でその人がどのような情報を必要としているかです。

WCAG 2.2 は達成基準 4.1.3 でステータスメッセージを扱っており、これはフォーカスの移動なしにプログラムで判別できるべきものです。W3C の解説では、不要な中断を避けることにも触れています。これは、新しく生成された単語を一つずつ通知する一般的な義務があることを意味するものではありません。AI チャットでは、処理状態と回答の内容を分けることが特に役立ちます。

終わりのない通知ではなく、三つの状態

私たち独自のデモモデルには、分かりやすい三つの状況があります。リクエスト受信、回答生成中、回答完了です。これらはプロセスについての手がかりを与えます。回答テキストそのものは内容に関する問いに答えるものであり、その後は本人のペースで読めるようにしておくべきです。

待っている間、利用者は自分の入力欄に戻ったり、ページの他の部分を読んだりすることがあります。テキストの断片が新たに届いたからといって、インターフェースがこの活動を押しのけるべきではありません。完成した回答が自動的にキーボードフォーカスを奪う必要もありません。

適切なフィードバックは状態によって異なります。まだ実行中のプロセスは、新たな判断を必要とするエラーとは別物です。すべてのメッセージを同じように緊急なものとして提示すると、まさにこの優先順位が失われます。

小さな HTML パターンでコンテンツとステータスを分ける

次の断片は私たち独自のもので、AI との接続は含まれていません。異なる役割を持つ二つの領域を示しているだけです。回答領域には、後から読めるテキストが入ります。短いステータス行は現在の状態を伝えます。

<section aria-labelledby="answer-title">
  <h2 id="answer-title">Answer</h2>
  <div id="answer"></div>
</section>
<p id="answer-status" role="status" aria-atomic="true"></p>

W3C のテクニック ARIA22 では、polite なライブリージョンを持つ role=status と、ステータス内容全体の通知について説明しています。私たちが明示的に指定した aria-atomic は、この意図を教材用の断片の中で見えるようにするものです。絶えず増えていく回答テキスト全体を、同じ短いステータスメッセージに入れる理由にはなりません。

実際の実装では、意味のある切り替わりの時点でステータス行を更新します。たとえば開始時に一度、完全に完了した後に一度です。その間の進行状況メッセージがどの程度本当に役立つかは、具体的なフローと支援技術を使ってテストする必要があります。

耳で確認する際には、回答の生成中にすでに別の場所を読んでいる人のことも考えてください。その人は何度も文を読み直さなければならないでしょうか。完成した回答を後から意図的に見つけられるでしょうか。こうした観察は、どこかで通知が聞こえることを確認するだけよりも、パターンの使われ方を正確に検証できます。

中止とエラーにはそれぞれ専用の言葉が必要です

出力が中断された場合、「完了」が単にそれ以上文字が届かないことを意味してはいけません。意図的に停止されたテキストは不完全な可能性があります。技術的なエラーは、使える結果がまったく生成されなかったことを意味する場合があります。こうした違いは、インターフェースの言葉で表現されるべきです。

最初の確認として、固定のサンプルテキストを三つ用意し、切り替わりを手動で発生させることができます。読み続けている間に何が通知されるか、フォーカスがその場に留まるか、完成したテキストにどうたどり着くかを観察してください。これは実施できる演習ですが、ここでは合格したスクリーンリーダーテストとして提示しているわけではありません。

KENJTEC ページで独自の HTML と JavaScript を準備する場合、そのために利用できるのが KENJTEC WebSiteBuilder ai の開発者モードで、サンドボックス化されたプレビューと独自コードの公開に対応しています。コンポーネントはご自身で移植します。これによって、追加の統合型 AI チャットサービスが作られるわけではありません。

決め手は実際の聞こえ方です

スクリーンショットでは、中断も予期しない通知も証明できません。したがってテストには、キーボードと実際の支援技術が必要です。後で特定の結果について報告する場合は、使用したデバイス、ブラウザー、スクリーンリーダーを記録してください。

優れたステータスパターンであっても、アクセシブルなチャットのあらゆる要件を自動的に満たすわけではありません。それが答えるのは限られた問いです。内容を一語ずつ押し付けることなく、処理状態をどう分かりやすくするか、という問いです。優れた解決策は、確かな手がかりと、自分の読むペースを本人がコントロールできることの両方を守ります。

出典と情報の時点

調査および資料は 2026 年十月 25 日時点のものです。 Understanding SC 4.1.3: Status Messages · ARIA22: Using role=status to present status messages。

出発点はハンブルクです。

役立つ知識は、どこへでも。

ハンブルク発、世界に向けたAI実践ガイド。

保存済み記事