내보내기(0) 인쇄
모두 확장

터치 사용 장치에서 가리키기를 시뮬레이션하는 방법

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

참고  이 동작은 aria-haspopup에서 가리키기 시뮬레이션을 지원하지 않는 Windows 7의 Internet Explorer 10 또는 기본 제공 터치 가리키기 지원이 있는 Windows 8.1의 Internet Explorer 11에 적용되지 않습니다.

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

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

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

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

대화형 콘텐츠의 표시 여부를 전환하는 가리키기 동작이 있는 페이지 요소에서 요소의 aria-haspopup 속성을 "true"로 설정합니다.


<style>
#hovermenu li ul {
 display: none;
}
#hovermenu li:hover ul{
 display: block;
}
</style>
<ul id="hovermenu">
	<li><a href="/news/" aria-haspopup="true">News Categories</a>
		<ul>
			<li><a href="/news/top">Top Stories</a></li>
			<li><a href="/news/technology">Technology</a></li>
			<li><a href="/news/sports">Sports</a></li>
			<li><a href="/news/finance">Finance</a></li>
		<ul>
	</li>
</ul>


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

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

관련 항목

개발자용 Internet Explorer 10 가이드

 

 

Microsoft는 MSDN 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 MSDN 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?
표시:
© 2014 Microsoft