복잡한 동적 웹 UI 컴포넌트(예: 커스텀 드롭다운, 탭 메뉴, 모달 다이얼로그)를 HTML과 CSS만으로 구현할 때, WAI-ARIA 속성을 사용하여 웹 접근성을 어떻게 보장할 수 있는지 구체적인 속성(예: role, aria-expanded, aria-labelledby)과 그 활용 사례를 들어 설명해주세요.

HTML과 CSS만으로는 시맨틱 마크업의 한계로 인해 복잡한 동적 UI 컴포넌트의 의미와 상태를 스크린 리더 사용자에게 명확히 전달하기 어렵습니다. WAI-ARIA는 이러한 간극을 메워 웹 접근성을 향상시키는 데 필수적입니다.

예를 들어, 커스텀 드롭다운 메뉴를 구현할 때, 버튼에 role="button"과 aria-haspopup="true"를 부여하여 이 요소가 팝업 메뉴를 트리거함을 알립니다. 메뉴가 열리고 닫히는 상태는 aria-expanded 속성으로 관리하며, true 또는 false 값을 가집니다. 메뉴 항목들은 role="menuitem"으로 지정하고, 메뉴 전체는 role="menu"로 감싸는 것이 좋습니다.

탭 메뉴의 경우, 각 탭 버튼에는 role="tab"을, 해당 탭 패널에는 role="tabpanel"을 부여합니다. 현재 활성화된 탭을 나타내기 위해 aria-selected="true"를 사용하고, 탭 버튼과 패널 간의 연결은 aria-controls 속성을 사용하여 명확히 합니다.

모달 다이얼로그는 role="dialog"로 지정하고, 모달의 제목을 스크린 리더가 인식하도록 aria-labelledby 속성을 사용하여 제목 요소의 ID를 연결합니다. 또한, 모달이 열렸을 때 사용자가 모달 외부로 포커스를 이동할 수 없도록 aria-modal="true"를 설정하는 것도 중요합니다.

이러한 ARIA 속성들을 적절히 활용하면, 키보드만으로도 모든 기능을 사용할 수 있게 하고 스크린 리더 사용자가 컴포넌트의 역할, 상태, 상호작용 방식을 정확히 이해하도록 도와 웹 접근성을 크게 향상시킬 수 있습니다.