aria-haspopup을 사용하여 터치 사용 장치에서 가리키기 시뮬레이션

웹 페이지 요소를 커서로 가리키는 것은 마우스와 키보드로 검색할 때의 일반적인 동작이지만 터치 기반 검색에는 동일한 동작이 없습니다. Windows 8의 Internet Explorer 10에서는 터치 사용 장치에서 가리키기를 시뮬레이션하는 aria-haspopup DOC(문서 개체 모델) 속성의 사용을 새롭게 도입했습니다.

참고  이 동작은 Windows 7의 Internet Explorer 10에는 적용되지 않습니다.

웹의 일반적인 패턴은 대화형 콘텐츠를 마우스 가리키기 뒤에 숨기는 것입니다. 예를 들어 사용자는 마우스로 요소를 가리킬 수 있으며 메뉴가 요소 아래에 표시됩니다. 일반적으로 가리키기는 :hover CSS 스타일시트 의사 클래스나 onmouseover DOM 이벤트를 통해 사용하도록 설정됩니다.

터치 시나리오에서 가리키기는 요소를 터치하는 동안 요소에 적용됩니다. 그러나 요소를 탭하여 링크 탐색 등 요소를 활성화할 수도 있습니다. 실제로 탭은 가리키기와 활성화를 하나의 동작으로 수행합니다. 이 경우 가리키기 뒤에 숨겨진 대화형 콘텐츠를 터치 사용자가 액세스할 수 없습니다. 조작 방식 모델은 완전히 다르며, 페이지 요소를 커서로 가리키기 위한 터치 아날로그가 없습니다.

모범 사례는 가리키기를 통해 사용자가 조작할 수 있는 콘텐츠를 숨기지 않는 것입니다. 대신 onclick 이벤트를 사용하여 표시 유형을 전환합니다.

또는 Internet Explorer 10에서는 숨겨진 대화형 콘텐츠가 있는 페이지 요소에서 가리키기를 시뮬레이션하기 위해 기존 aria-haspopup 속성에 새 동작을 추가합니다.

메뉴 등의 페이지 요소에서 요소의 aria-haspopup 속성을 "true"로 설정합니다. 터치 사용 장치의 Internet Explorer 10 사용자가 페이지 요소를 처음 탭하는 경우 사용자 환경은 요소를 커서로 가리키는 사용자의 환경과 동일합니다. 사용자가 페이지의 임의 위치를 탭하거나, 요소를 다시 탭하거나, 다른 페이지로 이동할 때까지 요소가 가리키기 상태로 유지됩니다. 또한 onclick 이벤트의 기본 동작(예: 링크 탐색)은 페이지 요소를 처음 탭할 때 수행되지 않습니다.

aria-haspopup 속성을 사용하도록 설정하면 마우스와 키보드를 사용한 방문자의 웹 페이지 동작이 변경되지 않습니다. 또한 이 용도로 aria-haspopup 속성을 사용할 경우 ARIA(Accessible Rich Internet Applications) 속성으로의 사용에 영향을 주지 않습니다.

관련 항목

DOM
개발자용 Internet Explorer 10 가이드

 

 

표시:
© 2014 Microsoft