React 팀이 Toast 알림 컴포넌트에 ARIA 라이브 영역과 키보드 상호작용을 추가해 스크린 리더 사용자도 동일하게 접근 가능하도록 구현

Context

Toast 알림은 단순한 UI 피드백 컴포넌트로 구현되는 경우가 많다. 이 방식은 마우스 사용자에게만 최적화되어 있으며 스크린 리더 사용자와 키보드 네비게이션 사용자를 고려하지 못한다. 자동 해제 타이머가 있을 때 보조 기술 사용자가 알림을 읽을 충분한 시간을 확보하기 어렵다.

Technical Solution

• Toast 컨테이너를 ARIA 라이브 영역으로 구현: role="status", aria-live="polite", aria-atomic="true" 속성을 설정하여 새로운 알림이 나타나면 스크린 리더가 자동 공지
• 일시 정지 상호작용 로직 추가: onMouseEnter, onMouseLeave, onFocus, onBlur 이벤트에서 타이머를 제어하여 마우스 사용자와 키보드 사용자 모두에게 읽을 시간 제공
• 접근 가능한 닫기 버튼 구현: 버튼에 aria-label 속성을 추가하여 "X" 기호만으로도 스크린 리더가 목적을 명확히 전달
• 포커스 도용 방지: 새로운 알림이 나타날 때 사용자의 현재 포커스를 변경하지 않아 타이핑이나 네비게이션 중단 방지
• 다중 알림 지원: 스택 방식으로 여러 알림을 표시하면서 최대 개수 제한으로 사용자 혼동 방지

Key Takeaway

Toast 알림처럼 작은 컴포넌트도 ARIA 라이브 영역, 키보드 상호작용 지원, 타이머 일시 정지 동작을 통해 모든 사용자가 동등하게 접근할 수 있도록 설계할 수 있다. 접근성은 큰 기술보다 구현 단계의 작은 의사결정의 누적 결과다.