Menu.md

Menu

• 네비게이션 메뉴는 웹 사이트의 기본 구조를 반영하며, 애플리케이션 메뉴는 애플리케이션의 필수 기능에 접근할 수 있는 통로가 되어준다.

• 따라서 메뉴는 웹 페이지 및 애플리케이션에 있어서 중요한 부분이며 디자인이나 개발을 진행할 때 특별한 주의가 필요하다.

• 일반적으로 목록(list)을 사용하여 메뉴의 구조를 표현한다.

  • 메뉴의 갯수를 알리고 해당 항목을 탐색하는 기능을 제공할 수 있다.

• 메뉴의 항목이 특정한 순서를 가지지 않는 경우 정렬되지 않은 목록(<ul />)을 사용.

• 메뉴의 항목이 순서가 중요한 경우에는 순서가 지정된 목록(<ol />)을 사용.

  • 시공 순서 → 순차적으로 진행하는 것이 중요하므로
    태그를 사용한다.

• <nav> 태그를 이용해 사용자가 메뉴를 식별할 수 있도록 하는 것이 좋다.

• aria-label 또는 aria-labelledby를 사용하여 label을 제공하자.

  • aria-label vs. aria-labelledby

    aria-label

    • 모든 HTML 태그에서 사용할 수 있으며, label 역할을 수행하려는 목적으로 작성하는 속성으로 특정 요소에 대한 설명을 작성한다.
    • 텍스트 대신 그래픽을 사용하는 경우와 같이 요소의 목적이 시각적으로만 표현되어 있는 경우 이 속성을 사용할 수 있다.

    aria-labelledby

    • 모든 HTML 태그에서 사용할 수 있으며 특정 요소에 대한 label 역할을 수행할 요소로써, DOM에 존재하는 다른 요소의 ID를 지정하게 된다.
    • label 자체를 재정의하기 때문에 다른 모든 label 관련 속성들(aria-label로 지정된 설명 혹은 <label> 태그)과 함께 쓰이더라도 가장 높은 우선 순위를 갖게 된다.
    • display: none 또는 visibility: hidden으로 설정되어 숨겨져 있는 요소도 참조가 가능

• aria-current를 사용하여 메뉴 내에서 현재 페이지를 표현할 수 있다.

• 메뉴를 탐색할 때 사용자에게 시각적인 지침을 주기 위해 hover 혹은 focus 시에 다른 스타일을 제공하는 것이 좋다.

• 자바스크립트를 활용해 마우스가 해당 영역을 벗어날 때 바로 닫히는 대신 약간 지연시키는 것이 좋다.

• 하위 메뉴가 노출되는 동안에는 aria-expanded 속성이 true로 설정되고 노출되지 않는 경우에는 false로 설정해주어야 한다.

• aria-expanded, aria-haspopup

Keyboard behavior

---

Top-Level Menu Items

Key	Action
Tab	현재 메뉴 바깥의 첫 번째 포커스 가능한 요소로 포커스를 이동
Shift + Tab	현재 메뉴 바깥에서 이전에 포커스 가능한 요소로 포커스를 이동
Right (→)	최상위 메뉴에서 다음 항목으로
Left (←)	최상위 메뉴에서 이전 항목으로
Enter	하위 메뉴 항목을 열고 첫 번째 하위 메뉴에 포커스를 위치시킨다.
Space
Down (↓)
Up (↑)	하위 메뉴 항목을 열고 마지막 하위 메뉴에 포커스를 위치시킨다.
ESC	메뉴에서 포커스를 제거한다.

Submenu Items

Key	Action
Tab	하위 메뉴를 닫고 메뉴 바깥에 위치한 가장 첫번째 포커스 가능한 요소에 포커스를 이동
Shift + Tab	하위 메뉴를 닫고 메뉴 바깥에 위치한 이전에 포커스 가능한 요소에 포커스를 이동
Right (→)	하위 메뉴를 닫고 최상위 메뉴에서 다음에 선택할 수 있는 항목으로 이동
Left (←)	하위 메뉴를 닫고 최상위 메뉴에서 이전에 선택할 수 있었던 항목으로 이동
Enter	현재 하위 메뉴에 적용되어 있는 기능을 실행
Space
Down (↓)	다음 하위 메뉴 아이템을 선택한다.
Up (↑)	이전 하위 메뉴 아이템을 선택한다.
ESC	하위 메뉴를 닫고 현재 최상위 메뉴를 선택한다.