용인 모바일 메뉴 — 햄버거 버튼 태그 · 열림 상태 · 초점 순서 점검
용인 모바일 메뉴를 고칠 때는 메뉴 이름보다 먼저 '줄 세 개 버튼'이 제대로 만들어졌는지 봐야 합니다. 버튼은 <button> 태그로, 열림 · 닫힘 상태는 aria-expanded로 알려 주고, 열린 메뉴는 버튼 바로 다음 순서로 초점이 가야 합니다. Esc로 닫으면 초점이 버튼으로 돌아오는지도 확인합니다.
- web.dev는 전역 내비게이션을 화면 크기에 따라 다르게 보여 줄 수 있지만, 모든 페이지에 같은 모습으로 있어야 한다고 설명합니다.
- W3C 예제는 메뉴를 여닫는 요소를 button으로 만들고 aria-expanded · aria-controls로 상태와 대상을 알리며, 일반 사이트 메뉴에는 menu 역할(role)을 쓰지 않습니다.
- WCAG 2.2의 2.4.3(초점 순서)은 메뉴가 여는 버튼 바로 다음 순서에 있지 않은 경우를 실패 사례로 듭니다.
- 2.4.7(초점 표시, AA)에 따라 키보드 초점 표시를 CSS로 지워 버리면 안 됩니다.
- 현재 보고 있는 페이지 링크에는 aria-current="page"를 붙이고, 눈으로도 구분되게 대비를 줍니다.
1메뉴를 버튼 하나에 접으면 무엇이 달라지나요?
web.dev의 HTML 학습 자료는 사이트 맨 위 전역 내비게이션을 모든 페이지에 같게 두고, 화면 너비에 따라 막대 · 드롭다운 · 펼침 메뉴 등 다른 모양으로 보여 줄 수 있다고 설명합니다. 동시에 메뉴 요소에 정해진 형식은 없으며, 적은 클릭으로 어느 페이지든 갈 수 있되 부담스럽지 않게 하라고 적었습니다.
그래서 휴대폰에서 메뉴를 접는 것 자체는 문제가 아닙니다. 다만 접힌 메뉴는 손님 눈에 보이지 않습니다. 아래는 공식 기준이 아니라 일반적인 제작 요령입니다. 전화 · 예약처럼 손님이 바로 누를 버튼은 메뉴 안에만 두지 말고 화면에 꺼내 두세요. 버튼 크기와 하단 고정 방법은 모바일 전화 버튼 글에 따로 정리했습니다.
2줄 세 개 버튼은 어떤 태그로 만들어야 하나요?
W3C 접근성 예제(APG)의 내비게이션 메뉴는 아래처럼 짜여 있습니다. 예제는 '메뉴'라는 말을 쓰지만 WAI-ARIA의 menu 역할은 쓰지 않는다고 밝힙니다. 일반 사이트 메뉴에는 그 역할이 기대하는 복잡한 키보드 동작이 필요 없기 때문입니다.
| 부분 | 권장 마크업 | 확인할 점 |
|---|---|---|
| 메뉴 전체 | <nav aria-label="주 메뉴"> | 화면 읽기 프로그램이 '내비게이션'으로 알립니다. 이름에 '내비게이션'을 또 넣지 않습니다(web.dev). |
| 줄 세 개 버튼 | <button type="button"> | div · span에 클릭만 걸면 키보드로 누를 수 없습니다. 아이콘만 있다면 '메뉴' 같은 글자 이름을 붙입니다. |
| 열림 상태 | aria-expanded="false" ↔ "true" | 열고 닫을 때 값이 실제로 바뀌는지 봅니다. |
| 여는 대상 | aria-controls="메뉴 목록 id" | 버튼이 어느 목록을 여는지 연결합니다. |
| 메뉴 항목 | <ul> 안의 <a href> | 목록으로 묶으면 항목 수를 화면 읽기 프로그램이 알려 줍니다(web.dev). |
3메뉴를 열면 초점은 어디로 가야 하나요?
초점(focus)은 키보드나 보조기기가 지금 가리키는 자리입니다. WCAG 2.2의 2.4.3 '초점 순서'(A등급) 해설은 메뉴나 대화상자가 여는 버튼과 바로 이어진 순서에 있지 않으면 실패 사례(F85)로 봅니다. 메뉴 목록을 HTML 맨 끝에 붙여 두면 버튼을 누른 뒤 한참 탭을 눌러야 메뉴에 닿습니다.
- Esc: APG 예제는 펼친 목록이 열려 있을 때 Esc를 누르면 닫히고 초점이 그 버튼으로 돌아가게 합니다.
- 닫힌 메뉴: 닫혀 있을 때 안의 링크로 탭이 들어가지 않는지 봅니다(일반 점검 요령).
- 초점 표시: 2.4.7 '초점 표시'(AA)는 키보드 초점이 보이는 방식이 있어야 한다고 정합니다. outline을 없애 표시를 안 보이게 하는 것은 실패 사례(F78)입니다.
- 가림: 하단 고정 바가 초점 받은 링크를 덮는지는 2.4.11 기준으로 전화 버튼 글에서 다뤘습니다.
4지금 보는 페이지는 메뉴에서 어떻게 표시하나요?
web.dev는 현재 페이지 링크에 aria-current="page"를 넣어 보조기기에 알리고, 눈으로 보는 손님에게는 CSS로 모양을 다르게 하라고 설명합니다. 같은 자료는 현재 위치 표시가 배경과 대비가 부족해 잘 보이지 않는 사례도 보여 줍니다. 색만 살짝 바꾸지 말고 굵기 · 밑줄 · 배경을 함께 바꾸면 구분이 쉽습니다.
메뉴 이름을 어떻게 짓고 모든 페이지에서 같은 자리에 두는지는 홈페이지 메뉴 구조 글에 있으니 여기서는 되풀이하지 않습니다.
5용인 가게라면 메뉴를 펼쳤을 때 무엇이 보여야 하나요?
용인특례시 기본현황을 보면 처인 · 기흥 · 수지 세 구 아래 5개 읍, 2개 면, 32개 동이 있고, 2026년 9월 말 인구는 1,111,855명(외국인 포함)입니다. 도시가 넓으니 '오시는 길'을 찾는 손님이 많습니다. 메뉴를 펼쳤을 때 맨 아래에 구 이름부터 적은 주소 한 줄과 전화 링크를 두면 메뉴를 닫지 않고도 위치를 확인할 수 있습니다(일반 요령).
기흥과 수지에 지점이 따로 있다면 지점마다 메뉴를 새로 만들기보다 '지점 안내' 한 항목 아래로 묶는 편이 접힌 메뉴에서 찾기 쉽습니다. 용인은 방문 지역이 아니어서 큰길브리지는 전국 비대면으로 진행합니다.
6고친 다음 휴대폰과 PC로 무엇을 눌러 보나요?
- 휴대폰에서 줄 세 개 버튼을 눌러 열고, 다시 눌러 닫습니다. 메뉴가 열린 채 뒤 화면이 스크롤되지 않는지 봅니다.
- PC 브라우저 창을 휴대폰 너비로 좁힌 뒤 Tab 키만으로 버튼에 가서 Enter로 엽니다. 다음 Tab이 메뉴 첫 항목으로 가는지 봅니다.
- Esc를 눌러 닫히고 초점이 버튼으로 돌아오는지, 초점 테두리가 보이는지 확인합니다.
- 휴대폰 화면 읽기 기능(iPhone VoiceOver, Android TalkBack)을 켜고 버튼에서 '메뉴, 펼쳐짐/접힘' 같은 상태가 읽히는지 듣습니다.
- 각 페이지에서 메뉴를 열어 현재 페이지가 표시되는지 봅니다.
메뉴와 함께 검색 노출 상태가 궁금하면 무료 SEO 점검을 신청하세요. 메뉴 구조를 새로 짜는 작업은 제작 문의로 받습니다.
자주 묻는 질문
모바일 메뉴 항목은 몇 개까지 넣어야 하나요?
확인한 공식 자료(web.dev · W3C)에는 항목 수를 정한 기준이 없습니다. web.dev는 적은 클릭으로 어느 페이지든 갈 수 있되 부담스럽지 않게 하라고만 설명합니다. 손님이 자주 찾는 순서대로 두고 덜 쓰는 항목은 하위로 묶으세요.
햄버거 메뉴에 role="menu"를 붙이면 더 접근성이 좋아지나요?
W3C APG의 내비게이션 예제는 일반 사이트 메뉴에 menu 역할을 쓰지 않습니다. 그 역할은 화살표 키 이동 같은 복잡한 키보드 동작을 기대하게 만들기 때문입니다. nav · button · 목록 · 링크로 만드는 것이 기본입니다.
줄 세 개 아이콘만 있으면 손님이 메뉴인 줄 알까요?
아이콘 모양에 대한 공식 기준은 확인하지 못했습니다. 다만 버튼에는 화면 읽기 프로그램이 읽을 이름이 있어야 하니, 아이콘 옆에 '메뉴' 글자를 함께 두면 이름 문제와 알아보기 문제를 같이 풉니다.
