ストリーミングされるチャット UI の回答をスクリーンリーダーに伝える手法の調査

sr-only は画面上では表示せず、スクリーンリーダーからは読み取れる状態にするための CSS クラスです。display: none や hidden を使用するとアクセシビリティツリーからも削除されるため、1px の領域に切り詰める方法などが使われます。 ChatGPT の回答本文には、aria-live や aria-busy は指定されていませんでした。つまり、動的に更新される回答本文はスクリーンリーダーへ自動通知されない構成です。回答とは別に、視覚的に隠された role="status" aria-live="polite" aria-atomic="true" の要素が配置されています。この要素は、生成中は「考え中」、生成が終わると「回答が完了しました」といったテキストへ更新され、回答の状態を通知します。 <div role="status" aria-live="polit

[simplememofast]

本文は更新しつつ通知だけ別のrole=statusへ逃がす設計は、ログ追尾やライブスコア等の高頻度更新にも通じる一般解。トークン生成はその極端な一例にすぎない