• 목록

aria-haspopup="true"는 HTML 요소가 드롭다운 메뉴, 컨텍스트 메뉴, 툴팁, 대화상자 등의 "하위 메뉴"를 가지고 있음을 보조 기술(스크린 리더 등)에 알리는 역할을 합니다.

✅ 웹 접근성을 향상시키고,
✅ 스크린 리더가 해당 요소가 클릭하면 메뉴가 나타나는지 안내할 수 있도록 합니다.

📌 사용 예제[code]<button aria-haspopup="true" aria-expanded="false">
  메뉴 열기
</button>[/code]aria-haspopup="true" → 이 버튼이 클릭되면 하위 메뉴가 열린다는 것을 스크린 리더에 알림
aria-expanded="false" → 메뉴가 현재 닫혀 있음을 나타냄 (JavaScript로 true로 변경 가능)

📌 aria-haspopup의 다양한 값
aria-haspopup에는 여러 가지 값이 있으며, 하위 요소의 종류를 지정할 수 있습니다.
"true" 일반적인 메뉴(기본값)
"menu" 네비게이션 또는 컨텍스트 메뉴
"listbox" 드롭다운 리스트박스
"tree" 트리 메뉴(트리 구조 UI)
"grid" 데이터 테이블(그리드)
"dialog" 대화상자(모달 창)

예제: 드롭다운 메뉴[code]<button aria-haspopup="menu" aria-expanded="false">
  옵션 선택
</button>
<ul role="menu">
  <li role="menuitem"><a href="#">설정</a></li>
  <li role="menuitem"><a href="#">로그아웃</a></li>
</ul>[/code]aria-haspopup="menu" → 이 버튼이 메뉴를 열 수 있음을 의미
role="menu" → 메뉴 컨테이너임을 지정
role="menuitem" → 각 항목이 "메뉴 아이템"임을 지정

📌 aria-haspopup + aria-expanded (메뉴 열기/닫기)
aria-expanded와 함께 사용하면, 메뉴가 열려 있는지 닫혀 있는지를 보조 기술에 알릴 수 있습니다.

JavaScript로 메뉴 상태 변경[code]<button id="menuButton" aria-haspopup="true" aria-expanded="false" onclick="toggleMenu()">
  메뉴 열기
</button>
<ul id="menuList" role="menu" style="display: none;">
  <li role="menuitem"><a href="#">홈</a></li>
  <li role="menuitem"><a href="#">서비스</a></li>
</ul>

<script>
  function toggleMenu() {
    let button = document.getElementById("menuButton");
    let menu = document.getElementById("menuList");

    let isExpanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", !isExpanded);
    menu.style.display = isExpanded ? "none" : "block";
  }
</script>[/code]버튼을 클릭하면 aria-expanded 값이 true ↔ false로 변경됩니다.
메뉴가 열릴 때 aria-expanded="true", 닫힐 때 aria-expanded="false"로 설정됩니다.

✅ 결론
aria-haspopup="true"는 요소가 하위 메뉴(드롭다운 등)를 가지고 있음을 알리는 속성입니다.
aria-expanded="true/false"와 함께 사용하면 메뉴의 상태(열림/닫힘)를 명확히 알릴 수 있음.
스크린 리더 사용자가 더 쉽게 내비게이션할 수 있도록 돕는 웹 접근성(ARIA) 속성입니다.