本文へ移動
easeweb
ご相談
トピックを検索

ストリーミング中に細切れで読み上げられてしまうAIチャットの返答

AIアシスタントが返答を数語ずつrole="log"に書き足すため、スクリーンリーダーは届いた断片を一つずつ読み上げ、返答をひとまとまりで読むことがない

WCAG 2.2
SC 4.1.3AA· 2.1 で追加
必須とする規格
EN 301 549(EU)
問題あり reply.append(chunk);
アクセシビリティの問題を示した図: 全盲:どうして回答が細切れなの?
01

問題

スクリーンリーダーの利用者には、AIアシスタントの回答がストリーミング中に途切れ途切れの言葉として聞こえ、ひとつの回答として追えない

02

試してみる

質問を送り、ストリーミングで届く回答がどう読まれるかを聞いてみましょう

ページの下の欄に、スクリーンリーダーが読み上げるメッセージが順に並びます。いくつに分かれていますか?回答がひとまとまりで聞こえることはありますか?次に、それぞれの修正を適用して、もう一度送ってください。

問題あり 修正できますか?

問題断片を一つずつ書き足すライブリージョンのログ

Fernhill ヘルプ

アシスタントに質問

アシスタント:こんにちは。ご注文、サイズ、返品についてお尋ねください。

スクリーンリーダーの読み上げ:

(質問を送ってください)

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

返答がそろってから、一度だけ伝える

修正前
問題断片を一つずつ書き足すライブリージョンのログ
<section class="assistant" aria-labelledby="assistant-title">  <h2 id="assistant-title">アシスタントに質問</h2>  <div class="messages" role="log" aria-label="会話">    <p class="message from-assistant"><span class="visually-hidden">アシスタント:</span>こんにちは。ご注文、サイズ、返品についてお尋ねください。</p>  </div>  <form class="ask-form">    <label for="ask-input">質問</label>    <input id="ask-input" autocomplete="off">    <button>送信</button>  </form></section>
問題点2点

会話は名前の付いたログで、どのメッセージも書いた人を伝え、フォーカスは欄に残ります。問題はストリーミングにあります。

  • 断片はライブリージョンのログの中で返答に書き足されるため、「はい、使用済みでも」「30日以内」「なら返品」と、一つずつ別のメッセージとして読み上げられます。
  • 返答がそろったときには何も伝えられないため、利用者は聞いた内容から、回答が終わったのか、まだ続くのかを判断できません。
修正後

そろった返答を一度だけ読む

<section class="assistant" aria-labelledby="assistant-title">  <h2 id="assistant-title">アシスタントに質問</h2>  <div class="messages" role="log" aria-label="会話" aria-live="off">    <p class="message from-assistant"><span class="visually-hidden">アシスタント:</span>こんにちは。ご注文、サイズ、返品についてお尋ねください。</p>  </div>  <p id="reply-status" class="visually-hidden" role="status"></p>  <form class="ask-form">    <label for="ask-input">質問</label>    <input id="ask-input" autocomplete="off">    <button>送信</button>  </form></section>
修正の手順4ステップ
  1. 会話に aria-live="off" を付けます。名前の付いたログのままなので、利用者は見つけてさかのぼって読めますが、フォーカスがほかにある間は、追加された内容は読み上げられません。ストリーミングは静かになります。
  2. 視覚的に隠した空の p に role="status" を付け、会話の外、そのすぐ横に置きます。最初の質問より前からページにあるため、書き込むと、控えめに読み上げられる変化になります。
  3. 最後の断片が届いたら、返答の全文をそこに書き込みます。返答の文字は隠した「アシスタント:」から始まるため、スクリーンリーダーは読み上げ中の内容を終えてから、「アシスタント:はい、使用済みでも30日以内なら返品できます…」とひとまとまりで一度読みます。
  4. 質問を送るときに領域を空にします。前の返答とたまたま一字一句同じ返答でも、変化として読まれます。

これで修正前の問題は直り、4.1.3を満たします。返答は、フォーカスを動かさずに、ひとつのメッセージとして一度伝えられます。ただし、返答が長いほど、何か聞こえるまでの待ち時間が延び、一度に聞く量も増えます。

混同しやすいもの
04

修正の確認

4項目、マウス不要

確認方法: スクリーンリーダー、キーボード

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。チャットのコンポーネント、ストリーミングの処理、コンポーネントライブラリーを変更した際は、再度確認します。

スクリーンリーダーでの role="status"、role="log"、role="log" aria-live="off"の読まれ方

制限

ライブリージョンの変化が続いたとき、どんな間隔で読むか、そもそも読み上げるのか、後回しにするのか、飛ばすのかは、スクリーンリーダー、ブラウザー、そのリリースによって異なります。利用者が使うものでストリーミングを確かめてください。細切れに読まれる返答を、伝えられているのがメッセージではないとして4.1.3の不適合とする監査人もいれば、ログが変化を一つずつ伝えてはいるとして使い勝手の指摘にとどめる監査人もいます。どちらにしても、利用者は回答を追えません。このガイドは、一つのページの一つのアシスタントを扱っています。ベンダーのフレームの中に描かれるアシスタントは、ベンダーの設定からしか変えられません。ベンダーに尋ねることは、メッセージを読み上げないチャットウィジェットにまとめています。自動で変わるスコア、ティッカー、タイマーは別の問題で、スクリーンリーダーが読み上げ続けるカウントダウンタイマーで扱っています。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る