🤖
1012 in / 781 out / 1793 total tokens
v0.28.1에서 웹 접근성을 대폭 개선했다. 키보드 사용자를 위한 Skip Links로 메인 콘텐츠와 검색 영역에 바로 접근할 수 있게 했다. 스크린 리더 사용자를 위해 검색 결과와 로딩 상태를 ARIA Live Regions로 알린다. SaveRouteDialog에는 Focus Trap과 Escape 키 핸들링을 추가해 모달 접근성을 높였다.
Skip Links는 기본적으로 화면에서 숨겨두고 포커스 시에만 노출한다. sr-only와 focus:not-sr-only를 조합해 시각적 방해 없이 키보드 사용자에게만 보여지도록 했다. Dialog는 useRef로 DOM에 직접 접근해 포커스를 가두고, role="dialog", aria-modal, aria-labelledby로 의미를 명확히 했다.
{/* Skip Links */}
<div className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[9998]">
<a href="#main-content" className="skip-link">메인 콘텐츠로 건너뛰기</a>
<a href="#search-area" className="skip-link">검색 영역으로 건너뛰기</a>
</div>
{/* ARIA Live Region */}
<div role="status" aria-live="polite" className="sr-only">
{isLoading ? '검색 중...' : `${results.length}개의 결과`}
</div>접근성은 나중에 붙이는 게 아니라 처음부터 설계해야 한다. 이번엔 땜질이지만 다음엔 더 일찍 신경 쓰자.