메뉴 | 웹접근성 빌드업

Tab으로 대메뉴를 순차 탐색합니다. 서브가 있는 항목은 버튼으로 열고(aria-expanded), 열린 뒤에만 하위 링크가 Tab 순서에 들어갑니다. 전체메뉴는 별도 버튼이며, 좁은 화면에서는 PC GNB 대신 이 레이어가 모바일 메뉴가 됩니다.

키보드로 확인해 보세요: Tab → 서브 버튼 Enter/Space로 열기 → Tab으로 하위 이동 → Esc로 닫기. 뷰포트를 좁히면 GNB가 사라지고 전체메뉴만 남습니다.

(앵커 대상 예시 — 소개)

온라인 신청

이용 안내

요금 안내

공지사항

자료실

FAQ

소식

문의하기

오시는 길

연락처

* 서브 있는 대메뉴: <button class="gnb-toggle" aria-expanded aria-controls> + ul.gnb-sub[hidden]

* 링크만 있는 대메뉴: <a class="gnb-link"> (페이지 이동)

* 전체메뉴 버튼: data-all-menu-open · aria-controls="allMenuLayer"

* 반응형 기준: max-width: 959px — PC GNB 숨김, 전체메뉴 = 모바일 메뉴

메뉴 키보드 동작
키	동작
Tab / Shift+Tab	대메뉴 순차 이동. 서브가 열린 항목만 하위 링크도 포함
Enter / Space	서브 토글 버튼 · 전체메뉴 열기/닫기
Esc	열린 서브 닫기 → 토글 버튼으로 초점 / 전체메뉴 열림 시 레이어 닫기

* hover만으로 서브 열기 금지 — 클릭/키보드로 열고, 닫힌 서브는 hidden으로 Tab에서 제외

* 전체메뉴: role="dialog" · aria-modal="true" · 포커스 트랩 · 닫을 때 연 버튼으로 초점 회귀

css/menu.css · js/menu.js · 마크업은 이 페이지 헤더 + #allMenuLayer