드롭다운 하위 메뉴를 포함하는 사이트 내비게이션 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
<nav> 랜드마크와 aria-label
사이트 내비게이션은 <nav> 요소로 감싸고 aria-label로 레이블을 제공해야 합니다.
하위 메뉴 트리거에 aria-expanded
하위 메뉴를 여는 버튼에 aria-expanded로 열림/닫힘 상태를 표시해야 합니다.
키보드 완전 지원
Tab으로 항목 이동, Enter/Space로 하위 메뉴 열기, Escape로 닫기, Arrow 키로 하위 항목 탐색을 지원해야 합니다.
aria-current="page" 설정
현재 활성 페이지에 해당하는 링크에 aria-current="page"를 설정해야 합니다.
aria-haspopup="menu" 추가
하위 메뉴가 있는 트리거에 aria-haspopup="menu"를 추가하면 스크린리더가 서브메뉴 존재를 미리 알 수 있습니다.
Escape로 닫기
열린 하위 메뉴를 Escape 키로 닫고 트리거로 포커스가 복귀해야 합니다.
포커스 트랩 없이 자연스러운 흐름
내비게이션 메뉴는 포커스 트랩 없이 Tab으로 메뉴 밖 이동 시 하위 메뉴가 닫혀야 합니다.
hover로만 하위 메뉴 열기
hover 이벤트만으로 하위 메뉴를 열면 키보드 사용자가 접근할 수 없습니다.
여러 <nav>에 동일한 레이블
여러 <nav> 요소에 동일한 aria-label을 사용하면 스크린리더 사용자가 구분할 수 없습니다.
AppBar + Drawer 조합
MUI에서 내비게이션은 보통 AppBar + Drawer 조합으로 구현합니다. Drawer에 aria-label을 제공하세요.