Usando aria-haspopup para simular o foco em dispositivos habilitados para toque

Focalizar seu cursor sobre um elemento de uma página da Web é uma ação comum ao navegar com um mouse e teclado, mas não existe algo equivalente na navegação baseada em toque. O Internet Explorer 10 no Windows 8 introduz um novo uso para a aria-haspopup propriedade DOM: simular o foco em dispositivos habilitados para toque.

Observação  Esse comportamento não é aplicável ao Internet Explorer 10 no Windows 7.

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 da 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 como um menu, defina a propriedade aria-haspopup do elemento como "true". 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

DOM
Guia para Desenvolvedores do Internet Explorer 10

 

 

Mostrar:
© 2014 Microsoft