귀로 듣는 챗봇의 탄생 | 접근성 업무일지 #3
손연지 토스 · 토스 기술 블로그
AI 핵심 요약
챗봇에서 선택 후 새 메시지와 버튼이 나타나도 스크린리더 사용자는 화면 전환과 다음 행동을 알아차리기 어려웠습니다. 이를 개선하기 위해 선택한 메시지로 초점을 옮기고, 부드러운 스크롤 뒤 `focus({ preventScroll: true })`를 호출해 시각적 이동과 초점 이동의 타이밍을 조정했습니다. 버튼이 있음을 알리는 스크린리더 전용 문구를 추가하고, `aria-live="polite"`와 송수신 효과음으로 상담원의 입력 및 메시지 상황도 전달했습니다. 직접 스크린리더로 흐름을 점검하며 접근성은 특정 사용자만을 위한 기능이 아니라 모든 사용자가 대화의 맥락을 더 명확히 이해하도록 돕는 설계임을 배웠습니다.
- 동적인 화면 전환에서는 시각적 시선의 흐름을 스크린리더 초점 이동으로 보완하세요.
- focus()는 브라우저의 즉시 스크롤을 유발할 수 있으므로, 부드러운 스크롤과 초점 이동을 분리하고 preventScroll 옵션을 활용하세요.
- 화면에 보이지 않는 선택지를 놓치지 않도록 스크린리더 전용 안내를 제공할 수 있습니다.
- aria-live="polite"와 메시지 효과음으로 입력 중·메시지 송수신 같은 상황 변화를 전달하세요.
소개
스크린리더 사용자에게도 챗봇 흐름이 자연스럽게 느껴지게 하기 위해 고민한 4가지 포인트를 알려드려요.
비슷한 학습 자료
문서 김유라/유아란
시각장애인에게 ‘읽는 순서’가 왜 중요할까? | 접근성 업무일지 #1
문서 미스터리 디자인 클럽
[미디클] 라디오 vs 체크박스 뭐가 좋을까? EP.1
문서 강영화