하위 하이퍼링크를 접어 두는 메뉴는 열기와 이동을 구분해야 한다. 열고 닫는 동작은 버튼이, 다른 위치로 이동하는 동작은 하이퍼링크가 맡는다. [[마우스 없이 읽는 순서]]에서도 같은 길을 찾을 수 있게 한다.
- 버튼의 `aria-expanded`로 펼쳐진 상태를 알리고 `aria-controls`로 대상 목록을 연결한다.
- Enter와 Space로 버튼을 누르고, Tab으로 펼쳐진 하이퍼링크를 이동한다. 예제는 Escape로 닫고 버튼으로 돌아간다.
- 일반적인 웹사이트 탐색에 앱 메뉴용 `role="menu"`를 붙이지 않는다. 그 역할에는 다른 키보드 동작이 기대된다.
- 스크립트가 실행되지 않으면 목록을 펼친 채 남긴다. 작동하지 않는 열기 버튼은 보이지 않는다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-08.html`로 저장해 웹 브라우저에서 연다. 가상의 작업 두 종류로 구성한 예제다.
```html
마우스와 키보드로 여는 메뉴
마우스와 키보드로 여는 메뉴
종이 작업
가상의 작품 목록이다.
웹 작업
가상의 작품 목록이다.
```
마우스로 올려놓기만 해서는 열리지 않는다. 클릭이나 터치로 버튼을 누르거나 키보드로 조작한다. 웹 브라우저 설정에 따라 하이퍼링크로 Tab 이동을 켜야 할 수 있다. [[시맨틱 HTML]]을 바탕으로 만들되 실제 적용 전에는 화면 낭독기에서도 확인한다. 메뉴가 필요 없을 만큼 항목이 적다면 [[접지 않아도 되는 메뉴]]가 더 편할 수 있다.
## 참고
- [W3C: 펼침 버튼으로 만든 탐색 메뉴](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
- [Interneting Is Hard: 위치 지정과 메뉴](https://internetingishard.netlify.app/html-and-css/advanced-positioning/)
#HTML #JavaScript #접근성