Informações
O tópico solicitado está sendo mostrado abaixo. No entanto, este tópico não está incluído nesta biblioteca.

Como simular foco em dispositivos habilitados para toque

Focalizar seu cursor sobre um elemento de página da Web é uma ação comum durante a navegação com mouse e teclado, mas não existe algo equivalente na navegação baseada em toque. Este tópico demonstra como usar a propriedade DOM aria-haspopup  para simular o foco em dispositivos habilitados para toque, com o Internet Explorer 10 no Windows 8.

Observação  Este comportamento não é aplicável ao Internet Explorer 10 no Windows 7 (que não é compatível com simulação de foco usando aria-haspopup) ou ao Internet Explorer 11 no Windows 8.1 que possui suporte ao foco por toque interno).

Um padrão comum na Web é ocultar o conteúdo interativo atrás do foco do mouse. Por exemplo, quando um usuário apontar para um elemento com o mouse, um menu é mostrado abaixo dele. Normalmente, o foco é ativado usando a pseudoclasse de CSS (Folhas de Estilo em Cascata) :hover  ou o evento de DOM onmouseover .

Em cenários com toque, o foco é aplicado a um elemento enquanto ele está sendo tocado. Porém, tocar em um elemento também pode ativá-lo, como ao navegar em um link. Na verdade, um toque é o foco e a ativação em uma única ação. Assim, o conteúdo interativo oculto atrás do foco fica inacessível para os usuários de toque. O modelo de manipulação é completamente diferente, e não há um análogo de toque a focalizar o cursor sobre um elemento de página.

O melhor é não usar o foco para ocultar um conteúdo com o qual o usuário pode interagir. Em vez disso, pense em usar o evento onclick para alternar a visibilidade.

Como alternativa, o Internet Explorer 10 adiciona um novo comportamento à propriedade aria-haspopup existente para simular o foco em elementos de página com conteúdo interativo oculto.

Em um elemento de página com comportamento de foco que ativa/desativa a visibilidade de conteúdo interativo, configure a propriedade aria-haspopup do elemento como "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>


Quando um usuário do Internet Explorer 10 em um dispositivo habilitado para toque toca pela primeira vez o elemento de página, a experiência do usuário é idêntica à do usuário que focaliza o elemento com um cursor. Até o usuário tocar em outro lugar da página, tocar no elemento novamente ou navegar para outra página, o elemento continua em seu estado focalizado. Além disso, as ações padrão do evento onclick (como a navegação de um link) não são executadas para o primeiro toque no elemento de página.

A ativação da propriedade aria-haspopup não muda o comportamento de sua página da Web para visitantes que usam um mouse e um teclado. Além disso, o uso da propriedade aria-haspopup para esse fim não afeta seu uso como uma propriedade ARIA (Accessible Rich Internet Applications).

Tópicos relacionados

Guia para Desenvolvedores do Internet Explorer 10

 

 

Mostrar:
© 2014 Microsoft