Fonctionnalités pour la gestion adaptative des entrées

Le modèle d’événement de pointeur dans Internet Explorer 10 vous permet de gérer en douceur toutes les entrées de la souris, du stylet, les entrées tactiles et les entrées tactiles multipoints en écrivant un seul ensemble d’événements. De même que les événements de souris, les événements de pointeur se déclenchent pour chaque pointeur (down, move, up, over et out (bas, déplacement, haut, sur et sortie)). La prise en charge tactile de base devrait fonctionner pour la plupart des sites sans nécessiter de changements, pour les raisons suivantes :

• Internet Explorer 10 offre une gestion par défaut courante pour les interactions tactiles de base, telles que le balayage pour les régions avec défilement, le zoom par double appui et par pincement, la sélection tactile et les menus contextuels d’appui prolongé. Ces fonctionnalités se déclenchent automatiquement pour que les sites et les applications offrent une expérience tactile excellente par défaut.
• Après avoir déclenché des événements de pointeur, Internet Explorer 10 déclenche des événements de souris pour le contact principal (par exemple, la première pression du doigt sur l’écran). Cela permet aux sites Web existants basés sur des événements de souris de continuer à fonctionner.

Pour obtenir des stratégies de conception conviviale et des conseils de résolution de problèmes de base, consultez Démarrage rapide : préparer votre site aux interactions tactiles. Quand vous êtes prêt à optimiser votre site pour les interactions tactiles tout en assurant la prise en charge transparente du clavier et de la souris, Internet Explorer 10 propose les fonctionnalités de gestion adaptative des entrées décrites dans cet article.

• Détection des fonctionnalités tactiles
• Simulation du pointage de la souris pour les entrées tactiles
• Spécification et remplacement des comportements tactiles
• Modèle d’événements de pointeur
• Modèle d’événements de mouvement
• Formulaires tactiles HTML5
• Rubriques associées

Détection des fonctionnalités tactiles

Internet Explorer 10 fournit la propriété msMaxTouchPoints pour vérifier la prise en charge matérielle des fonctionnalités tactiles et tactiles multipoints côté client :

if (navigator.msMaxTouchPoints > 1) {
  // Supports multi-touch
}

Pour détecter la fonctionnalité tactile côté serveur, Internet Explorer 10 fournit le jeton "Touch" dans la chaîne de l’agent utilisateur. Une fois la prise en charge tactile confirmée, vous pouvez vérifier le pointerType de l’événement MSPointerDown pour détecter les entrées tactiles de votre utilisateur :

element.addEventListener("MSPointerDown",handleDown,false);
function handleDown(event) {
  if(event.pointerType == event.MSPOINTER_TYPE_TOUCH) {
    // Do something for touch input only
  }else{
    // Do something for non-touch input
  }
}

Simulation du pointage de la souris pour les entrées tactiles

La navigation tactile ne dispose d’aucune fonctionnalité équivalant au pointage du curseur sur un élément de page Web. Par conséquent, les actions ou les contenus activés par le biais du pointage sont potentiellement inaccessibles aux utilisateurs tactiles. Les sous-menus activés par pointage constituent un scénario courant illustrant le problème. La pratique recommandée consiste à ne pas utiliser le pointage pour masquer du contenu avec lequel l’utilisateur peut interagir. Envisagez plutôt d’utiliser l’événement onclick pour afficher/masquer ce contenu. Internet Explorer 10 ajoute également un nouveau comportement à la propriété aria-haspopup existante pour simuler le pointage sur des éléments de page ayant un contenu interactif masqué :

<style type="text/css">
#menu .cssSubMenu {
  display: none;
}
#menu:hover .cssSubMenu {
  display: block;
}
</style>

...
<div id="menu" aria-haspopup="true">
  <a>CSS Hover Menu</a>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 1</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a>Sub menu item 2</a> </div>
    <div aria-haspopup="false" class="cssSubMenu">
      <a class="cssSubLink">Sub menu item 3</a> </div>
</div>

Pour plus d’informations, voir Utilisation de l’attribut aria-haspopup pour simuler le pointage sur des appareils tactiles.

Spécification et remplacement des comportements tactiles

Par défaut, Internet Explorer 10 exploite les déplacements tactiles, les pincements et les doubles appuis et n’envoie pas d’événements pour ces interactions. Vous pouvez utiliser la propriété CSS -ms-touch-action pour remplacer ces valeurs par défaut et spécifier les comportements d’actions tactiles autorisés pour votre site. Le tableau suivant décrit les valeurs possibles.

Pour obtenir un contrôle affiné de l’élément tactile zoom et défilement panoramique/défilement, il existe un certain nombre de nouvelles propriétés qui permettent, par exemple, de définir des limites et des points d’ancrage de zoom et de défilement, de verrouiller l’axe du mouvement de défilement panoramique ou d’autoriser le défilement panoramique de structure libre. Pour déterminer les éléments pouvant être sélectionnés sur la page, vous pouvez utiliser la propriété -ms-user-select, qui fonctionne de façon similaire pour tous les types d’entrées.

Modèle d’événements de pointeur

Internet Explorer 10 fournit un modèle d’événements de pointeur qui vous permet de gérer facilement toutes les entrées de souris, de stylet, les entrées tactiles et les entrées tactiles multipoints sous une forme abstraite appelée pointeur. Les événements utilisés pour la capture des entrées du pointeur générique et les propriétés de ces événements sont très similaires à ceux que vous utilisez pour la souris (tels que down, move, up, over et out), avec quelques capacités supplémentaires pour les autres formes d’entrées et les différents pointeurs. Pour obtenir des suggestions sur la gestion des entrées tactiles multipoints et des entrées de souris dans d’autres navigateurs, consultez le site IEBlog.

Modèle d’événements de mouvement

Afin de concevoir des expériences tactiles plus avancées, Internet Explorer 10 fournit le modèle d’événements de mouvement, qui vous permet de gérer des interactions utilisateur plus complexes.

Formulaires tactiles HTML5

Internet Explorer 10 introduit la prise en charge des contrôles d’entrée HTML5 qui sont tous optimisés pour les entrées tactiles. Voici quelques-unes des améliorations tactiles :

• Le contrôle de sélection parcourt toutes les options, autorisant le défilement continu.
• Les zones d’entrée textuelle comportent un bouton Effacer tout.
• Les sous-zones de défilement de la page fonctionnent tactilement.
• Le contrôle de plage fournit un retour continu de la valeur sélectionnée.
• Les boutons et les liens permettent d’annuler un clic tactile en effectuant un mouvement en dehors de la cible.
• Les cases d’option et les cases à cocher sont facilement accessibles tactilement. Elles peuvent également être activées tactilement par le biais de leur étiquette.
• Les info-bulles sont plus grandes et plus éloignées du lien si vous les activez tactilement et non par le biais d’une souris.

Pour la saisie de texte, vous pouvez améliorer encore davantage les expériences tactiles des utilisateurs en identifiant les types d’entrées spécifiques telles que les adresses électroniques, les numéros de téléphone ou les URL—Internet Explorer 10 présentera une disposition de clavier tactile adaptée à ce type d’entrée dans Windows 8.

Rubriques associées

Concevoir des sites Web adaptatifs

Fonctionnalités pour la disposition adaptative