aria-haspopup 속성
aria-haspopup 속성은 해당 요소가 팝업을 트리거할 수 있다는 것을 스크린 리더 사용자에게 알려주는 속성이다. 이 속성은 요소에 의해 트리거될 수 있는 메뉴 또는 대화 상자와 같은 대화형 팝업 요소의 유형과 가용성을 나타낸다.
예를 들어, 아래 코드에서 버튼을 클릭하면 팝업이 열리게 된다. 이때 aria-haspopup 속성은 해당 버튼이 팝업을 트리거할 수 있다는 것을 스크린 리더 사용자에게 알려준다.<button aria-haspopup="true" aria-expanded="false">More</button> <ul role="menu" aria-hidden="true"> <li role="menuitem"><a href="http://www.naver.com">naver</a></li> <li role="menuitem"><a href="http://www.google.com">google</a></li> <li role="menuitem"><a href="http://www.bing.com">bing</a></li> </ul>여기서 aria-haspopup이 true로 설정되어있는 버튼을 스크린 리더가 읽을 때 팝업이 트리거 될 수 있다고 알려준다.
aria-haspopup 속성의 종류
- true: 해당 요소가 팝업을 트리거할 수 있다는 것을 나타낸다.
- false: 해당 요소가 팝업을 트리거할 수 없다는 것을 나타낸다.
- menu: 해당 요소가 메뉴를 트리거할 수 있다는 것을 나타낸다.
- listbox: 해당 요소가 목록 상자를 트리거할 수 있다는 것을 나타낸다.
- tree: 해당 요소가 트리를 트리거할 수 있다는 것을 나타낸다.
- grid: 해당 요소가 그리드를 트리거할 수 있다는 것을 나타낸다.
- dialog: 해당 요소가 대화 상자를 트리거할 수 있다는 것을 나타낸다.
tabindex 속성
tabindex 속성은 HTML 요소의 탭 순서를 지정합니다. 이 속성을 사용하면 사용자가 탭 키를 사용하여 요소 간에 이동할 때 탭 순서를 제어할 수 있다.
팝업 팝업 내부 영역에서만 이동하도록 하는 방법
tabindex 속성을 사용하면 웹 페이지에서 키보드 탭 키를 사용하여 요소 간에 이동할 때 요소의 포커스 순서를 지정할 수 있다.
tabindex 속성 값에 양의 정수를 입력하면 해당 요소는 지정된 순서대로 포커스가 이동한다.
tabindex 속성 값이 0인 경우 해당 요소는 문서의 순서대로 포커스가 이동한다.
tabindex 속성 값이 -1인 경우 해당 요소는 포커스를 받을 수 없다.
팝업 내부에서만 이동하도록 하려면 tabindex 속성을 사용하여 팝업 내부의 모든 포커스 가능한 요소에 대해 순서를 지정할 수 있다. 이렇게 하면 팝업 외부의 요소로 포커스가 이동하지 않는다.
예를 들어, 아래 코드에서는 tabindex 속성을 사용하여 팝업 내부의 모든 포커스 가능한 요소에 대해 순서를 지정하고 있다.<div class="popup"> <button tabindex="-1">팝업 외부 버튼</button> <div class="popup-inner"> <input type="text" tabindex="1" placeholder="이름"> <input type="text" tabindex="2" placeholder="이메일"> <button tabindex="3">전송</button> </div> </div>여기서 tabindex가 -1으로 지정되어 있는 외부의 버튼은 포커스 되지 않고, tabindex가 양수로 설정되어 있는 안의 영역들만 순서대로 포커스되게 된다.
