프론트엔드
눈 대신 귀로 느낄 수 있는 챗봇 흐름 만들기 | 접근성 업무일지 #3
두줄요약
스크린리더 사용자도 챗봇 흐름을 자연스럽게 따라가도록 초점 이동과 안내를 개선했습니다. 부드러운 스크롤, 음성 안내, 효과음으로 접근성을 높인 사례입니다.
핵심 내용
- 스크린리더 사용자에게도 챗봇 흐름이 자연스럽게 느껴지도록 접근성 개선한 프론트엔드 사례
- 화면 전환 시 초점 이동과 안내 음성, 효과음을 함께 설계해 인지 흐름 보완
구조와 흐름
- 상위 항목 선택 후 하위 버튼이 나타나는 챗봇 UI에서 화면 변화 인지가 어려운 문제 확인
- 시각적 흐름을 초점 이동으로 대응하고, 버튼 존재 안내와 메시지 상황 피드백을 추가
적용해볼 점
- scrollIntoView와 focus 호출 타이밍 분리로 부드러운 스크롤과 초점 이동 동시 확보
- aria-live, ScreenReaderOnly, 효과음 등을 활용한 비시각 정보 보강