귀로 듣는 챗봇의 탄생 | 접근성 업무일지 #3

챗봇에서 선택 후 새 메시지와 버튼이 나타나도 스크린리더 사용자는 화면 전환과 다음 행동을 알아차리기 어려웠습니다. 이를 개선하기 위해 선택한 메시지로 초점을 옮기고, 부드러운 스크롤 뒤 `focus({ preventScroll: true })`를 호출해 시각적 이동과 초점 이동의 타이밍을 조정했습니다. 버튼이 있음을 알리는 스크린리더 전용 문구를 추가하고, `aria-live="polite"`와 송수신 효과음으로 상담원의 입력 및 메시지 상황도 전달했습니다. 직접 스크린리더로 흐름을 점검하며 접근성은 특정 사용자만을 위한 기능이 아니라 모든 사용자가 대화의 맥락을 더 명확히 이해하도록 돕는 설계임을 배웠습니다.

• 동적인 화면 전환에서는 시각적 시선의 흐름을 스크린리더 초점 이동으로 보완하세요.
• focus()는 브라우저의 즉시 스크롤을 유발할 수 있으므로, 부드러운 스크롤과 초점 이동을 분리하고 preventScroll 옵션을 활용하세요.
• 화면에 보이지 않는 선택지를 놓치지 않도록 스크린리더 전용 안내를 제공할 수 있습니다.
• aria-live="polite"와 메시지 효과음으로 입력 중·메시지 송수신 같은 상황 변화를 전달하세요.