WAI-ARIA 요소 - menu role

웹페이지의 탐색을 돕기 위해 사용되거나 또는 복잡한 웹 앱에서 빠질 수 없는 요소인 메뉴 위젯을 ARIA를 사용하여 바르게 마크업하는 방법 및 주의점에 대해 살펴보겠습니다. 또한, 스크린 리더 사용자, 키보드 사용자의 메뉴 탐색을 위한 키보드 적용에 대해서도 살펴봅니다.

 

웹페이지 및 SPA(single page application)에서의 메뉴는 크게 두 가지로 정의할 수 잇습니다.

첫 번째로, 일반적인 웹페이지 탐색 시 사용되는 주메뉴, 서브메뉴와 같은 사이트 탐색에 필요한 네비게이션 형태이며,

두 번째로, 구글 문서와 같은 웹 앱에서의 파일 열기, 도구 메뉴와 같은 데스크톱 형태의 메뉴로 구분할 수 있습니다.

 

일반적으로 메뉴를 마크업할 때 ul 요소를 메뉴 컨테이너로 사용하며, ul 요소에 포함된 li 요소는 role="none"으로,

li에 포함된 링크는 메뉴 항목 또는 서브메뉴로 마크업합니다.

a 요소는 메뉴 항목을 클릭했을 때 이동될 페이지 또는 대화 상자 등을 기리키는 요소로 사용됩니다. 이러한 요소에 적절한 ARIA 역할 및 속성을 적용하여 스크린 리더 사용자가 메뉴의 확장/축소 여부, 라디오 메뉴 항목, 체크 메뉴 항목과 같은 의미 있는 메뉴 항목으로 인지하고 탐색할 수 있도록 구현할 수 있습니다.

 

메뉴를 구현하기 위한 WAI-ARIA 역할 및 속성은 다음과 같습니다.

• aria-haspopup="true"
  메뉴를 열기 위한 버튼에 설정 혹은 메뉴 항목이 서브메뉴를 가진 경우 설정하며, 메뉴 버튼인 경우 해당 버튼이 팝업 메뉴를 가지고 있음을 스크린 리더 사용자가 알 수 있도록 하기 위해 사용합니다.
• aria-expanded="true"
  메뉴가 확장되었음을 나타낼 때 사용됩니다. 스크린 리더는 <접근성 메뉴 확장됨> 등과 같이 스크린 리더 사용자에게 알립니다.
• aria-expanded="false"
  스크린 리더 사용자에게 메뉴가 축소되었음을 을립니다. 하위 메뉴를 포함하는 컨테이너에 aria-expanded를 false로 설정하면, <접근성 메뉴 축소됨>과 같이 메뉴가 축소되었음을 스크린 리더 사용자에게 알립니다.
• menu 역할 (manubar)
  스크린 리더 사용자가 메뉴 요소로 인지할 수 있도록 하기 위해 사용되며, 메뉴 컨테이너 (일반적으로 ul 요소)에 menu 역할을 선언합니다. ul 요소는 aria-labelledby="label ID" 속성을 사용하여 ul 요소에 적절한 레이블을 제공해야 합니다. 하위 메뉴는 role="menu"를 사용합니다.
• aria-orientation
  스크린 리더 사용자가 메뉴가 가로 또는 세로 형태로 배치되었는지 여부를 알리기 위해 사용합니다. vertical, horizontal 값으로 설정할 수 있으며, 기본 값은 horizontal 입니다.
• none 역할
  메뉴 항목 (일반적으로 li 요소)의 목록 항목 역할을 숨깁니다.
• menuitem 역할
  스크린 리더 사용자가 요소가 메뉴 역할임을 인지할 수 있도록 하기 위해 사용하며, menu 및 menubar 역할에 포함합니다. 일반적으로, a 요소의 텍스트 값이 메뉴 항목의 이름으로 사용됩니다.

 

 

메뉴 위젯의 키보드 접근성 보장하기

메뉴 위젯은 메뉴의 모든 메뉴 항목을 탐색하기 위한 키보드 지원을 제공해야 합니다.

메뉴에 대한 키보드 지원에는 일반적으로 메뉴 항목 사이를 탐색하고 메뉴를 열고 실행할 수 있는 Enter, Space키 지원 등이 포함됩니다. 메뉴 위젯의 키보드 지원은 크게 초점이 메뉴바의 메뉴 항목에 위치했을 때와 확장된 서브메뉴에 위치했을 때로 분류할 수 있습니다.

메뉴 바의 메뉴 항목에 초점이 있는 경우 다음과 같이 키보드 사용자가 접근하고 탐색할 수 있도록 키보드 사용을 보장해야 합니다.

• 왼쪽 화살표 : 이전 메뉴 항목 (menuitem) 으로 이동합니다.
• 오른쪽 화살표 : 다음 메뉴 항목 (menuitem) 으로 이동합니다.
• 위쪽 화살표 : 현재 위치한 서브메뉴를 포함하는 메뉴를 열고 첫 번째 메뉴 항목에 초점을 위치합니다.
• 아래쪽 화살표 : 현재 위치한 서브메뉴를 열고 첫 번째 메뉴 항목에 초점을 위치합니다.
• Enter : 서브메뉴를 포함하는 메뉴를 열거나 메뉴 항목에 초점이 위치했다면, 메뉴 항목을 활성화합니다.
• Space : 서브 메뉴를 열거나 메뉴 항목을 실행합니다. 서브메뉴를 포함하는 메뉴에 초점이 위치했다면, 스페이스를 눌렀을 때 첫 번째 메뉴 항목에 초점을 위치합니다.

서브 메뉴가 확장되어 초점이 하위 메뉴에 위치했을 때 키보드 사용을 다음과 같이 보장해야 합니다.

• 왼쪽 화살표 : 확장된 하위 메뉴를 축소하고 부모 메뉴의 이전 초점 영역으로 초점을 이동합니다.
• 오른쪽 화살표 : 하위 메뉴가 또 다른 하위 메뉴를 포함하는 경우 풀다운 메뉴를 열고 첫 번재 메뉴 항목으로 초점을 이동합니다.
• 위쪽 화살표 : 이전 메뉴 항목으로 초점을 이동합니다.
• 아래쪽 화살표 : 다음 메뉴 항목으로 초점을 이동합니다.
• Enter : 선택한 메뉴 항목을 활성화하고 메뉴를 닫습니다.
• Space : 선택한 메뉴 항목을 활성화 하고 메뉴를 닫습니다.
• Esc : 메뉴를 닫고 부모 메뉴의 이전 초점을 받았던 곳으로 초점을 이동합니다.

또한, 메뉴바에 포함된 각각의 메뉴 항목은 tabindex 속성을 -1로 설정하여 초점을 받지 않도록 처리해야 합니다. 추가적으로 Google 문서와 같은 복잡한 웹앱의 File, 편집과 같은 주메뉴를 효율적으로 탐색할 수 있도록 해당하는 메뉴에 Alt+Shift+F 또는 상황에 맞는 메뉴 (마우스 오른쪽 버튼으로 열 수 있는 메뉴) 등에 대한 단축키 지원이 필요할 수 있습니다.

 

 

주의

ARIA를 사용하여 메뉴 위젯을 마크업할 때 주의할 점은 다음과 같습니다.

• none 역할은 보조 기술의 호환성을 위해 role="none presentation" 형식으로 작성하거나 role="presentation" 과 같이 사용하는 것이 좋습니다.
• 스크린 리더 사용자가 메뉴바 또는 하위 메뉴를 포함하는 요소에 초점을 위치했을 때 자동으로 메뉴가 펼쳐지는 것은 예기지 않은 동작이 수행되지 않도록 초점 관리에 세심한 주의가 필요합니다.
• menuitem 역할을 적절한 메뉴 컨테이너에 배치하지 않고 단독으로 사용할 경우 스크린 리더 사용자의 페이지 탐색을 방해할 수 있으므로, menuitem 은 menu, menubar와 같은 메뉴 컨테이너 내에 포함해야 합니다.

 

 

예제:)

menubar-navigation

https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-navigation.html

https://codepen.io/pen?&prefill_data_id=38e9ab75-41bf-4a52-b79d-f969c49c34ee 

menubar-navigation

 

menu-button-links

https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links.html

https://codepen.io/pen?&prefill_data_id=1cc904c4-c87e-4228-bd64-9bfedb1e7c4d 

menu-button-links

 

 

 

 

참고:)

https://nuli.navercorp.com/community/article/1132961

WAI-ARIA 바르게 사용하기 6부: menu role 바르게 사용하기