4건의 Accessibility 위반 해결을 통한 AI 채팅 UI의 Keyboard-only 접근성 확보

Context

AI 챗봇의 제품 추천 카드 인터페이스를 Semantic structure 없이 <div> 태그 기반으로만 설계한 구조적 한계 존재. 시각적 구현에 치중한 결과 Keyboard user의 접근이 완전히 차단된 UX 병목 지점 발생.

Technical Solution

• display: flex 및 overflow-x: auto 기반의 Card rail에 tabindex="0"를 부여하여 Keyboard focus 진입점 확보
• Arrow key를 통한 Focus management 로직을 구현하여 Mouse 없이 제품 리스트 탐색이 가능한 Navigation 설계
• aria-label을 Chat input에 적용하여 Screen reader가 필드의 목적을 명확히 인지하도록 보완
• 단순 <div> 나열 구조를 role="list" 및 role="listitem"으로 변경하여 제품 간의 계층적 관계 정의
• 전체 채팅 인터페이스를 <main> Landmark로 래핑하여 페이지 내 주요 콘텐츠 영역의 구조적 식별력 강화
• AI 생성 제품 설명을 <img> 태그의 alt 속성과 동기화하여 시각 장애 사용자의 정보 획득 경로 최적화