챗봇, 이제 귀로도 편안하게!
by DD
11개월 전
조회수 1
스크린리더 사용자의 챗봇 사용성 개선을 위해 초점 이동 및 음성 안내를 추가함
target.focus() 사용 시 발생하는 스크롤 문제를 해결하기 위해 scrollIntoView와 preventScroll 옵션을 활용함
aria-live 속성을 사용하여 상담원 입력 중 상태를 음성으로 안내하고, 효과음을 추가하여 사용자 경험을 향상시킴
초점 이동과 스크롤 제어
스크린리더 사용성을 위해 초점 이동은 필수적이다. 구체적으로 target.focus() 사용 시 부드러운 스크롤이 무시되는 문제를 해결하기 위해, scrollIntoView로 스크롤 후 preventScroll: true 옵션을 사용하여 초점을 이동했다. 따라서, 시각적 흐름과 초점 이동을 일치시켜 사용자 경험을 개선했다.
음성 안내와 aria-live 속성
aria-live="polite" 속성을 활용하여 상담원 입력 중 상태를 음성으로 안내했다. 을 추가하여 시각적 정보 부재를 보완하고, 사용자에게 을 제공했다. 반면, 과도한 음성 안내는 오히려 를 높일 수 있으므로, 적절한 타이밍과 빈도가 중요하다.
