Agent Clarifying Questions Need a Focus Handoff, Not a Noisier Live Region

개요

AI 에이전트가 사용자에게 질문할 때 키보드 및 스크린 리더 사용자를 위한 초점(focus) 전달 문제를 해결하기 위한 접근성 개선 방안을 제시합니다.

주요 내용

* 문제점: AI 에이전트가 답변을 스트리밍하는 동안 갑자기 질문 카드를 표시할 때, 키보드 사용자는 텍스트 입력창(composer)에 초점이 고정되어 있어 새롭게 나타난 질문 카드의 컨트롤에 접근할 수 없습니다. 또한, aria-live="polite" 영역이 토큰 스트리밍으로 인해 질문 내용을 덮어버려 스크린 리더 사용자도 질문을 인지하지 못하는 문제가 발생합니다.
* 원인 분석:
* 토큰 텍스트를 상태(status) 텍스트와 동일한 aria-live 영역에서 처리하여 질문 발표를 가로막았습니다.
* 질문 카드가 의미론적 형태(fieldset, legend, tab stop) 없이 일반적인 markdown <p> 태그로 렌더링되었습니다.
* 질문이 나타났음에도 불구하고 텍스트 입력창이 활성화되어 있어 사용자가 Enter 키를 누르면 질문 대신 메시지가 전송되었습니다.
* 해결 방안:
* 두 개의 aria-live 영역 사용: 하나는 스트리밍 중인 토큰 텍스트를 위한 시각적 채널로, 다른 하나는 중요한 질문이나 상태 변경을 위한 음성 채널로 분리합니다.
* 의미론적 구조화: 질문 카드를 fieldset, legend 등 적절한 HTML 요소로 구성하여 키보드 접근성을 확보합니다.
* 명확한 초점(focus) 전달: 질문이 나타나면 legend 또는 질문의 첫 번째 컨트롤로 초점을 명시적으로 이동시킵니다.
* 상태 기반 UI 제어: 'streaming' 상태와 'awaiting_user' 상태를 명확히 구분하여 UI 컨트롤(텍스트 입력창, 전송 버튼 등)의 활성화/비활성화를 제어합니다. 'awaiting_user' 상태에서는 텍스트 입력창을 비활성화하여 Enter 키가 질문 제출로 오작동하는 것을 방지합니다.
* Esc 키를 이용한 질문 취소 및 초점 복구: Esc 키로 질문을 취소할 경우, 초점을 다시 텍스트 입력창으로 복구하여 사용자가 다음 행동을 이어갈 수 있도록 합니다.
* 구현 시 고려사항:
* aria-live 영역에 textContent를 설정할 때 기존 내용을 지우고 새로 설정하여 동일한 내용이라도 음성 알림이 발생하도록 합니다.
* aria-atomic="true"를 사용하여 스크린 리더가 전체 내용을 읽도록 합니다.
* fieldset 자체에 aria-live를 적용하기보다는 legend나 status 메시지로 충분히 안내합니다.
* 질문 제출 후 초점이 이전 컨트롤(예: 라디오 버튼)에 남아있지 않도록 composer로 복구합니다.

시사점

AI 에이전트 인터페이스의 접근성을 향상시키기 위해서는 단순한 시각적 디자인 개선을 넘어, 사용자 상호작용의 상태 변화에 따른 명확한 초점 전달과 의미론적 구조화가 필수적이며, 이는 모든 사용자가 AI 에이전트와 효과적으로 소통할 수 있도록 보장합니다.