Réponse aux interactions du clavier (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Concevez et générez des applications avec lesquelles les utilisateurs peuvent interagir par le biais d’un clavier matériel, du Clavier visuel ou du clavier tactile.

Astuce  Les informations fournies dans cette rubrique sont spécifiques au développement d’applications en JavaScript.

Pour les applications en C++, C# ou Visual Basic, voir Réponse aux interactions du clavier (XAML).

Pour les applications utilisant DirectX avec C++, voir Développement de contrôles basés sur la souris (DirectX et C++).

 

Conditions préalables: Si vous débutez dans le développement d’applications en JavaScript, consultez les rubriques ci-dessous pour vous familiariser avec les technologies décrites ici.

Créer votre première application du Windows Store en JavaScript

Feuille de route pour les applications du Windows Store en JavaScript

Découvrir les événements avec Démarrage rapide : ajout de contrôles HTML et gestion des événements

Fonctionnalités d’application de A à Z:

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z

Interaction utilisateur de A à Z (HTML)

Personnalisation de l’interaction utilisateur de A à Z (HTML)

Recommandations en matière d’expérience utilisateur:

Les bibliothèques de contrôles de plateforme (HTML et XAML) fournissent l’intégralité de l’expérience d’interaction utilisateur de Windows, y compris les interactions standard, les effets physiques animés et le retour visuel. Utilisez ces contrôles intégrés si vous n’avez pas besoin d’une prise en charge d’interaction personnalisée.

Si les contrôles de plateforme ne suffisent pas, les présentes recommandations peuvent vous aider à fournir une expérience d’interaction utilisateur à la fois immersive et cohérente entre les divers modes d’entrée. Ces recommandations sont axées principalement sur l’entrée tactile, mais elles s’appliquent également à l’entrée de pavé tactile, de souris, de clavier et de stylet.

Exemples: Découvrez cette fonctionnalité en action dans nos exemples d’applications.

Exemple de personnalisation de l’interaction utilisateur de A à Z

Entrée : exemple de fonctionnalités de périphériques

Entrée : exemple de clavier tactile

Exemple de réponse à l’apparition du Clavier visuel

Vue d’ensemble

Les entrées via le clavier représentent une part importante de l’expérience d’interaction utilisateur globale pour les applications. Le clavier est indispensable pour certaines personnes souffrant d’un handicap et les utilisateurs qui le considèrent simplement comme un moyen plus efficace d’interaction avec une application. Par exemple, les utilisateurs doivent pouvoir naviguer dans votre application à l’aide des touches de direction et de tabulation, activer les éléments d’interface utilisateur à l’aide des touches Espace et Entrée, et accéder aux commandes à l’aide de raccourcis clavier.

Une interface utilisateur de clavier bien conçue représente un aspect important de l’accessibilité logicielle. Elle permet aux utilisateurs malvoyants ou souffrant d’un handicap moteur de naviguer dans une application et d’interagir avec ses fonctionnalités. Les utilisateurs qui ne sont pas en mesure d’utiliser une souris peuvent avoir recours à diverses technologies d’assistance, telles que les outils de clavier amélioré, les claviers visuels, les écrans élargis, les lecteurs d’écran et les utilitaires d’entrée vocale.

Le clavier matériel externe, qui est physiquement connecté à un appareil, est le type de clavier le plus courant. En plus d’un clavier matériel, Windows 8 fournit également deux claviers logiciels :

  • Le Clavier visuel est un clavier logiciel que vous pouvez utiliser dans Windows à la place du clavier physique pour entrer des données à l’aide de la fonction tactile, de la souris, du stylo/stylet ou d’un autre périphérique de pointage (un écran tactile n’est pas nécessaire). Le Clavier visuel est fourni pour les systèmes qui ne possèdent pas de clavier physique ou pour les utilisateurs qui connaissent des problèmes de mobilité les empêchant d’utiliser les périphériques d’entrée physiques classiques. Le Clavier visuel émule la plupart, sinon la totalité, des fonctionnalités d’un clavier matériel.

    Clavier visuel

  • Le clavier tactile est un clavier logiciel visuel permettant d’entrer du texte à l’aide de la fonction tactile. Le clavier tactile ne se substitue pas au Clavier visuel dans Windows car il n’est utilisé que pour la saisie de texte (il n’émule pas le clavier matériel) et apparaît seulement quand un champ textuel ou un autre contrôle textuel modifiable reçoit le focus.

    Remarque  Le Clavier visuel a priorité sur le clavier tactile, lequel n’est pas visible si le Clavier visuel est présent.

    Voici quelques exemples de clavier tactile.

Windows - disposition classique:

![Clavier tactile dans une disposition classique](images/Hh700405.touch_keyboard_standard(fr-fr,WIN.10).png "Clavier tactile dans une disposition classique")

Windows - disposition ergonomique (qui n’est pas forcément disponible dans toutes les langues):

![Clavier tactile dans une disposition ergonomique](images/Hh700405.touch_keyboard_thumb(fr-fr,WIN.10).png "Clavier tactile dans une disposition ergonomique")

Windows Phone - disposition classique:

![Clavier tactile Windows Phone](images/Hh700405.touch_keyboard_phone_standard(fr-fr,WIN.10).png "Clavier tactile Windows Phone")

Événements de clavier

Les événements de clavier suivants peuvent se produire pour les claviers physiques et tactiles.

Événement Description
keydown Se produit lorsqu’une touche est enfoncée.
keyup Se produit lorsqu’une touche est relâchée.
keypress Se produit lorsqu’une touche alphanumérique est enfoncée.

 

Événements de clavier et focus

Les contrôles de votre interface utilisateur génèrent des événements de clavier uniquement lorsqu’ils ont le focus d’entrée. Un élément individuel reçoit le focus lorsque l’utilisateur clique ou appuie directement sur cet élément dans l’interface ou qu’il utilise la touche Tab dans la zone de contenu.

Vous pouvez également appeler la méthode focus pour forcer le focus. Cette action est nécessaire lorsque vous implémentez des touches de raccourci, car le focus du clavier n’est pas défini par défaut lors du chargement de votre interface utilisateur. Pour plus d’informations, voir Exemple de touches de raccourci, plus loin dans cette rubrique.

Pour qu’un contrôle puisse recevoir le focus d’entrée, il doit être activé et visible. Il s’agit de l’état par défaut de la plupart des contrôles. Lorsqu’un contrôle a le focus d’entrée, il peut être déclenché et répondre aux événements d’entrée de clavier, tel que décrit plus loin dans cette rubrique. Vous pouvez également répondre à un contrôle qui reçoit ou perd le focus en gérant les événements focus, focusin, blur et focusout.

Par défaut, l’ordre de tabulation des contrôles est celui dans lequel les contrôles apparaissent dans le code HTML. Vous pouvez cependant changer cet ordre à l’aide de la propriété tabIndex. Pour plus d’informations, voir Implémentation de l’accessibilité du clavier (HTML).

Gestionnaires d’événements de clavier

Nous vous recommandons d’ajouter des gestionnaires d’événements par programme plutôt que de manière déclarative dans le code HTML (voir Pourquoi il est déconseillé de définir un gestionnaire d’événements dans le balisage).

Trois événements d’entrée sont associés directement aux interactions du clavier : keydown, keyup et keypress.

La plupart des gestionnaires d’événements acceptent un seul argument, un Event object qui contient des informations sur l’événement. Parmi les propriétés d’événements de clavier les plus utiles, citons target, keyCode et, si la propagation des événements est autorisée, currentTarget.

Touche

Vous êtes généralement à l’écoute des événements de clavier pour traiter une valeur de touche spécifique. Afin de déterminer quelle touche est enfoncée ou relâchée, vérifiez la valeur keyCode dans les données d’événements. keyCode renvoie une valeur Key. L’énumération Key inclut toutes les touches prises en charge.

Raccourcis clavier

Outre l’implémentation de la navigation au clavier et l’activation du clavier pour votre application, il est recommandé de mettre en œuvre des raccourcis pour les fonctionnalités de votre application. Un raccourci est une combinaison de touches (en général une lettre combinée à une touche de modification) qui améliore la productivité en fournissant à l’utilisateur un moyen efficace d’accéder aux fonctionnalités de l’application.

Une touche d’accès rapide est un raccourci vers un élément de l’interface utilisateur de votre application. Les touches d’accès rapide sont formées à partir de la touche Alt et d’une lettre.

Une touche accélérateur est un raccourci vers une commande d’application. Votre application peut avoir ou non une interface utilisateur qui correspond exactement à la commande. Les touches accélérateur sont formées avec la touche Ctrl et/ou Maj et une lettre.

L’attribut x-ms-acceleratorKey vous permet d’informer les lecteurs d’écran et autres technologies d’assistance de l’existence d’une touche accélérateur. Cet attribut ne fournit pas le comportement de la touche accélérateur. Vous devez fournir des gestionnaires d’événements de clavier, par exemple keydown, keyup et keypress, pour traiter les touches accélérateur dans votre application.

Écoute et gestion d’un événement de clavier

Nous expliquons ici comment spécifier et définir un gestionnaire pour l’événement keydown.

Remarque  Ces exemples sont tirés de l’exemple d’interaction utilisateur personnalisée associé à la rubrique Personnalisation de l’interaction utilisateur de A à Z (HTML).

 

Ce gestionnaire d’événements filtre toutes les frappes de touches et traite uniquement les touches Gauche et Droite.

// Key down handler. 
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
    // Process keystroke only if color selected.
    if (!that.selectedColor) {
        return;
    }
    if (eventInfo.target === msGesture_ColorMixer.target) {
        if (that._focus === false) {
            return;
        }
        // Set increment or decrement value based on key pressed.
        var increment;
        if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
            increment = -1;
        }
        else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
            increment = 1;
        }
        else return;

        // Attach first contact and track input device type.
        if (!that._pointerType) {
            that._pointerType = "keyboard";
        }
        // Rotate the color mixer.
        _Rotate(increment);
        // Event tracking.
        //document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
    }
}, false);

Déclarez vos touches de raccourci dans le balisage HTML à l’aide des attributs accesskey et x-ms-acceleratorkey.

<div class="ColorSelector" id="colorSelector">
    <!-- 
        The aria-label attribute can be used when:
            - the name of an element cannot be determined 
              programmatically from the content of the element.
            - providing a visible label and/or tooltip is not 
              the desired user experience.
        However, if the label text is visible on screen, you should 
        use aria-labelledby instead of aria-label. 
    -->
    <div class="Color" 
         id="red" 
         aria-labelledby="redLabel redValue" 
         tabindex="0" 
         accesskey="R">
        <span class="ColorLabel" 
              id="redLabel" 
              data-win-res="{textContent: 'colorpicker_red'}" />
        <span class="ColorValue" id="redValue" />
    </div>
    <div class="Color" 
         id="green" 
         aria-labelledby="greenLabel greenValue" 
         tabindex="0" 
         accesskey="G">
        <span class="ColorLabel" 
              id="greenLabel" 
              data-win-res="{textContent: 'colorpicker_green'}" />
        <span class="ColorValue" id="greenValue" />
    </div>
    <div class="Color" 
         id="blue" 
         aria-labelledby="blueLabel blueValue" 
         tabindex="0" 
         accesskey="B">
        <span class="ColorLabel" 
              id="blueLabel" 
              data-win-res="{textContent: 'colorpicker_blue'}" />
        <span class="ColorValue" id="blueValue" />
    </div>

<!-- 
Ctrl+S invokes the Save button and is exposed by a tooltip. 
-->
<button 
  id="sendButton" 
  value="Send" 
  title="Send (Ctrl+S)" 
  x-ms-acceleratorkey="S">Send</button>

L’infrastructure prend en charge la fonctionnalité de clavier pour la définition du focus ou l’appel d’éléments, mais vous devez implémenter des gestionnaires d’événements de clavier, tels que keydown, keyup et keypress, pour traiter les touches accélérateur dans votre application.

var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
  var itm = e.srcElement;
  if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
    // Invoke send functionality.
  }
});

Modificateurs d’événements

preventDefault annule l’action par défaut de l’événement sans arrêter la propagation dans le modèle DOM (Document Object Model). Utilisez cancelable pour vérifier si l’événement peut être annulé, car appeler preventDefault pour un événement non annulable n’a aucun effet.

stopPropagation annule la propagation d’événement durant la phase de capture ou de propagation d’événement. Toutefois, l’événement est diffusé à tous les écouteurs d’événements sur la cible active (qu’il s’agisse de la phase de capture ou de propagation) avant l’arrêt du flux d’événement. Pour empêcher complètement l’exécution des gestionnaires restants, utilisez plutôt la méthode stopImmediatePropagation.

Clavier tactile

Les contrôles de saisie de texte fournissent le support automatique du clavier tactile. Lorsque l’utilisateur définit le focus d’entrée sur un contrôle de texte à l’aide de l’entrée tactile, le clavier tactile apparaît automatiquement. Lorsque le focus d’entrée n’est pas placé sur un contrôle de texte, le clavier tactile est masqué.

Lorsque le clavier tactile apparaît, votre interface utilisateur est automatiquement repositionnée afin que l’élément ciblé reste visible. Des zones importantes de l’interface utilisateur peuvent alors sortir de l’écran. Vous pouvez désactiver ce comportement par défaut et effectuer vos propres ajustements de l’interface utilisateur lorsque le clavier tactile apparaît. Pour plus d’informations, voir Exemple de réponse à l’apparition du Clavier visuel.

Si vous créez un contrôle personnalisé qui nécessite une saisie de texte mais ne découle pas d’un contrôle de saisie de texte standard, vous pouvez ajouter la prise en charge du clavier tactile en implémentant les modèles de contrôle Automation d’interface utilisateur appropriés. Pour plus d’informations, voir Exemple de clavier tactile.

Les touches enfoncées sur le clavier tactile déclenchent les événements keydown et onkeyup, exactement comme si vous aviez appuyé sur les touches d’un clavier physique. Cependant, le clavier tactile ne déclenchera pas d’événements de saisie pour les touches Ctrl+A, Ctrl+Z, Ctrl+X, Ctrl+C et Ctrl+V, qui sont réservées à la manipulation de texte dans le contrôle de saisie.

Recommandations en matière d’expérience utilisateur pour la prise en charge des interactions avec le clavier

Voici des recommandations pour la prise en charge des interactions avec le clavier :

Considérations d’ordre général

  • Les utilisateurs doivent être en mesure d’accomplir toutes les tâches prises en charge par votre application en utilisant exclusivement le clavier physique ou visuel.Remarque  Le clavier tactile sert uniquement à l’entrée de texte ; il n’est pas utilisé pour les commandes d’application commandes système.

     

  • Au démarrage de votre application, définissez le focus clavier initial sur l’élément avec lequel, selon vous, les utilisateurs interagiront intuitivement en premier. En général, l’emplacement le plus approprié est l’affichage de contenu principal de l’application, ce qui permet à l’utilisateur de parcourir immédiatement le contenu à l’aide des touches de direction. Pour plus d’informations sur la définition du focus sur des contrôles spécifiques, voir focus.

  • Assurez-vous que les touches Tab et de direction permettent de parcourir le contenu dans un ordre logique.

  • Affectez à l’attribut tabIndex une valeur supérieure ou égale à 0 pour tous les éléments d’interface utilisateur interactifs qui ne sont pas dans l’ordre de tabulation par défaut. La définition de l’attribut tabIndex est importante car les utilisateurs de lecteurs d’écran naviguent entre les éléments d’interface utilisateur interactifs à l’aide de la touche Tab.

  • Utilisez les touches de direction comme raccourcis clavier pour la navigation interne correcte parmi les éléments enfants d’éléments composites. Si les nœuds de l’arborescence ont des éléments enfants distincts pour la gestion de la fonctionnalité développer-réduire et l’activation des nœuds, utilisez les touches de direction Gauche et Droite pour fournir au clavier la fonctionnalité développer-réduire.

  • Assurez-vous que chaque élément d’interface utilisateur sur lequel il est possible de cliquer peut également être appelé à l’aide du clavier.

  • Implémentez des raccourcis clavier pour les fonctionnalités clés de l’application. (Un raccourci clavier est une combinaison de touches qui améliore la productivité en fournissant à l’utilisateur un moyen efficace d’accéder aux fonctionnalités de l’application.)

    Une touche d’accès est un raccourci vers un élément de l’interface utilisateur de votre application. Elle est composée de la touche Alt et d’une lettre.

    Une touche accélérateur est un raccourci vers une commande d’application. Votre application peut avoir une interface utilisateur qui correspond exactement à la commande. Les touches accélérateur sont formées à partir de la touche Ctrl et d’une lettre.

    Vous devez permettre aux utilisateurs qui se font aider de lecteurs d’écran et d’autres technologies d’assistance de découvrir facilement les touches de raccourci de votre application. Déclarez les touches de raccourci dans le balisage HTML de votre application en utilisant les attributs accessKey et -ms-AcceleratorKey, et indiquez-les à l’aide d’info-bulles, de noms accessibles, de descriptions accessibles ou d’autres formes de communication visuelle. Veillez à documenter correctement les touches de raccourci dans le contenu de l’aide de votre application.

    Pour obtenir de l’aide supplémentaire sur l’implémentation de touches de raccourci, voir la section Touches de raccourci dans les Recommandations en matière d’expérience utilisateur Windows.

    Ne redéfinissez pas les raccourcis clavier par défaut auxquels les utilisateurs sont habitués dans toute application du Windows Store. Voir Raccourcis clavier pour une liste complète.

Matériel

Interrogez les fonctionnalités du clavier (KeyboardCapabilities) pour déterminer si un clavier est connecté et pour identifier les aspects de l’interface utilisateur de votre application auxquels le clavier peut accéder directement. Pour plus d’informations sur l’interrogation des fonctionnalités du périphérique, voir Démarrage rapide : identification des périphériques de pointage.

Associez les boutons de clavier aux éléments d’interface utilisateur appropriés (boutons Précédent et Suivant) dans votre application.

Retour visuel

  • Utilisez les rectangles de sélection uniquement pour les interactions avec le clavier. Si l’utilisateur commence une interaction tactile, estompez progressivement l’interface utilisateur du clavier. Cela maintient l’interface utilisateur propre et aérée.
  • N’affichez pas de retour visuel si un élément ne prend pas en charge l’interaction (tel que le texte statique).
  • Affichez un retour visuel simultanément pour tous les éléments qui représentent la même cible d’entrée.
  • Fournissez des boutons à l’écran (par exemple + et -) en guise d’indications pour émuler des manipulations tactiles comme le mouvement panoramique, la rotation, le zoom, etc.

Pour obtenir des recommandations plus générales sur le retour visuel, voir Recommandations en matière de retour visuel.

Rubriques associées

Étude conceptuelle

Réponse à l’interaction utilisateur

Implémentation de l’accessibilité du clavier

Démarrage rapide : ajout de contrôles HTML et gestion des événements

Affichage et édition de texte