• 목록

role="menuitem"은 웹 접근성(ARIA, Accessible Rich Internet Applications) 속성 중 하나입니다.
이 속성은 해당 요소가 "메뉴 항목(menu item)" 역할을 한다는 것을 스크린 리더(보조 기술)에게 알리는 역할을 합니다.

📌 role="menuitem"을 사용하는 이유
일반적으로 <a> 태그나 <button> 태그는 기본적으로 클릭 가능한 요소이지만, 웹 접근성을 강화하기 위해 명시적으로 "메뉴 항목" 역할을 지정하는 것이 좋습니다.
✅ 스크린 리더(예: JAWS, NVDA, VoiceOver)에서 더 정확한 정보 제공
✅ 키보드 네비게이션(예: Tab, Arrow 키)을 사용할 때 올바른 동작 제공
📌 예제 코드[code]<nav role="menu">
  <ul>
    <li role="menuitem"><a href="#">홈</a></li>
    <li role="menuitem"><a href="#">서비스</a></li>
    <li role="menuitem"><a href="#">문의하기</a></li>
  </ul>
</nav>[/code]✅ 이 코드의 의미
<nav> 안의 <ul> 리스트가 메뉴(menu) 역할을 합니다.
각각의 <li> 요소는 role="menuitem"을 사용하여 메뉴 항목임을 나타냅니다.
스크린 리더가 이 요소를 읽을 때 "메뉴 항목: 홈, 메뉴 항목: 서비스" 등의 방식으로 읽어줍니다.

📌 role="menuitem"이 필요한 경우
드롭다운 메뉴, 네비게이션 메뉴 등에서 사용
JS로 만든 커스텀 UI에서 링크나 버튼이 "메뉴 항목" 역할을 할 때 사용
스크린 리더 사용자를 위한 명확한 구조 제공

📌 role="menuitem"과 함께 사용되는 속성
role="menu" 메뉴 컨테이너 역할 (메뉴 그룹을 정의)
role="menuitem" 개별 메뉴 항목 역할
aria-haspopup="true" 하위 메뉴(드롭다운 메뉴)가 있음을 알림
aria-expanded="true/false" 하위 메뉴가 열렸는지 여부를 알림

예제: 드롭다운 메뉴 적용[code]<ul role="menu">
  <li role="menuitem" aria-haspopup="true" aria-expanded="false">
    <a href="#">메뉴 1</a>
  </li>
  <li role="menuitem">
    <a href="#">메뉴 2</a>
  </li>
</ul>[/code]aria-haspopup="true" → 이 메뉴 항목에 하위 메뉴(서브 메뉴)가 있다는 것을 알림
aria-expanded="false" → 기본적으로 하위 메뉴가 닫혀 있음 (JavaScript로 변경 가능)

✅ 결론
role="menuitem"은 스크린 리더가 해당 요소를 "메뉴 항목"으로 인식하도록 도와주는 역할을 합니다.
키보드 네비게이션 및 접근성을 개선하는 데 유용합니다.
role="menuitem"을 사용할 때는 반드시 role="menu"와 함께 사용해야 합니다.