• 목록

aria-expanded="false"는 해당 요소가 확장(열림)되었는지 여부를 보조 기술(스크린 리더 등)에 알리는 속성입니다.
✅ false → 현재 닫혀 있음
✅ true → 현재 열려 있음

보통 드롭다운 메뉴, 아코디언, 토글 버튼 등에서 상태를 표시하는 데 사용됩니다.

📌 aria-expanded 사용 예제[code]<button aria-expanded="false">
  메뉴 열기
</button>[/code]aria-expanded="false" → 기본적으로 닫혀 있음
사용자가 클릭하면 aria-expanded="true"로 변경됨

📌 aria-expanded + aria-haspopup 조합
드롭다운 메뉴처럼 하위 요소가 있는 경우, aria-expanded와 aria-haspopup을 함께 사용할 수 있습니다.

예제: 드롭다운 메뉴[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="false" ↔ true로 변경됨
✅ display: none;을 사용해 메뉴가 보이거나 숨겨짐

📌 aria-expanded 사용 사례
🔽 드롭다운 메뉴 aria-expanded="true"이면 메뉴가 열려 있음
📌 아코디언(FAQ 등) 클릭 시 aria-expanded가 true/false로 변경됨
➕ 토글 버튼 사이드바 열기/닫기 상태 표시

예제: 아코디언 FAQ[code]<button id="faqButton" aria-expanded="false" onclick="toggleFAQ()">
  질문 보기
</button>
<div id="faqContent" style="display: none;">
  답변: 웹 접근성이란 모든 사용자가 쉽게 웹을 이용할 수 있도록 하는 것입니다.
</div>

<script>
  function toggleFAQ() {
    let button = document.getElementById("faqButton");
    let content = document.getElementById("faqContent");

    let isExpanded = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", !isExpanded);
    content.style.display = isExpanded ? "none" : "block";
  }
</script>[/code]✅ 버튼을 클릭하면 FAQ가 열리고(aria-expanded="true"), 다시 닫힙니다(aria-expanded="false")

✅ 결론
aria-expanded="false" → 현재 닫혀 있음
aria-expanded="true" → 현재 열려 있음
드롭다운 메뉴, 아코디언, 토글 버튼에서 사용
aria-haspopup="true"와 함께 사용하면 하위 메뉴 표시 가능