Windows Dev Center

Recommandations en matière de clavier tactile

Le clavier tactile permet de saisir du texte dans les applications du Windows Store installées sur des appareils gérant les fonctions tactiles. Il est appelé lorsqu’un utilisateur appuie sur un champ d’entrée modifiable. Le clavier tactile sert uniquement à saisir du texte. Il ne contient aucune touche de commande, telles que les touches Alt ou Fn.

Il existe deux méthodes pour faire disparaître le clavier :

  • Envoi du formulaire.
  • La commande Masquer le clavier est appelée (voir ci-après).

    Commande Masquer le clavier sur le clavier tactile

En général, le clavier tactile ne disparaît pas automatiquement tant que l’utilisateur parcourt les contrôles dans un formulaire. Ce comportement peut varier en fonction des autres types de contrôle du formulaire.

Voir cette fonctionnalité en action dans le cadre de notre série Fonctionnalités d’application de A à Z:  Interaction utilisateur : entrée tactile... et plus encore.

Pratiques conseillées et déconseillées

  • Affichez le clavier tactile pour l’entrée de texte uniquement. Notez que le clavier tactile ne fournit pas une grande partie des accélérateurs ou touches de commande présents sur un clavier physique, tels que les touches Alt, les touches de fonction ou la touche de logo Windows.
  • Ne redéfinissez pas l’entrée à partir du clavier tactile dans des commandes ou raccourcis.
  • N’obligez pas les utilisateurs à naviguer dans l’application à l’aide du clavier tactile.

Clavier tactile et interface utilisateur personnalisée

Ces recommandations ne sont pertinentes que si votre application utilise des contrôles personnalisés. Les contrôles d’entrée de texte fournis par Windows interagissent correctement avec le clavier tactile par défaut. Si vous créez une interface utilisateur personnalisée en C#/VB/C++ et XAML, utilisez la AutomationPeer class pour accéder aux contrôles UI Automation. Entrée : exemple de clavier tactile montre comment lancer le clavier tactile à l’aide des contrôles personnalisés des applications en XAML.

En JavaScript et HTML, vous devez accéder à UI Automation en définissant les propriétés ARIA (Accessible Rich Internet Applications) de vos contrôles personnalisés. Pour plus d’informations, voir Mappage de rôles ARIA à UI Automation.

  • Affichez le clavier par l’interaction complète avec votre formulaire.

    Assurez-vous que vos contrôles personnalisés ont le ControlType UI Automation approprié pour garantir la persistance du clavier quand un champ d’entrée de texte perd le focus dans le contexte d’une entrée de texte. Par exemple, si vous avez un menu qui est ouvert au milieu d’un scénario d’entrée de texte et que vous souhaitez que le clavier reste affiché, le menu doit avoir le ControlType Menu. Pour les applications en C#/VB/C++ et XAML, consultez AutomationControlType enumeration. En JavaScript et HTML, affectez au rôle ARIA le type de contrôle approprié.

  • Assurez-vous que les utilisateurs peuvent toujours voir le champ d’entrée dans lequel ils tapent.

    Le clavier tactile masque la moitié de l’écran. Les applications du Windows Store procurent une expérience par défaut pour la gestion de l’interface utilisateur quand le clavier tactile apparaît, en s’assurant que le champ d’entrée ayant le focus est visible. Durant la personnalisation de votre interface utilisateur, gérez les événements Showing et Hiding exposés par l’objet InputPane pour personnaliser la réaction de votre application à l’apparition du clavier.

  • Ne manipulez pas les propriétés UI Automation pour contrôler le clavier tactile. D’autres outils d’accessibilité reposent sur la précision des propriétés UI Automation.

  • Implémentez les propriétés UI Automation pour les contrôles personnalisés qui ont une entrée de texte. Pour permettre au clavier de persister de manière contextuelle quand le focus passe à d’autres contrôles, un contrôle personnalisé doit avoir l’une des propriétés suivantes :

    • Button
    • Check box
    • Combo box
    • Radio button
    • Scroll bar
    • Tree item
    • Menu
    • Menu item

    Pour les applications en C#/VB/C++ et XAML, consultez AutomationControlType enumeration. En JavaScript et HTML, affectez au rôle ARIA le type de contrôle approprié.

Indications d’utilisation supplémentaires

Gestion des événements d’affichage et de masquage

Voici un exemple d’association de gestionnaires d’événements pour les événements showing et hiding du clavier tactile.



<SCRIPT type=”text/javascript”>
    Windows.UI.ViewManagement.InputPane.getForCurrentView().addEventListener("showing", onInputPaneShowing);
    Windows.UI.ViewManagement.InputPane.getForCurrentView().addEventListener("hiding", onInputPaneHiding);

// Handle the showing event.
function onInputPaneShowing(e)
{
    var occludedRect = e.occludedRect;

    // For this hypothetical application, the developer decided that 400 pixels is
    // the minimum height that will work for the current layout. When the
    // app gets the InputPaneShowing message, the pane is beginning to animate in.

    if (occludedRect.Top < 400)
    {
        // In this scenario, the developer decides to remove some elements (perhaps
        // a fixed navbar) and dim the screen to give focus to the text element.
        var elementsToRemove = document.getElementsByName("extraneousElements");

        // The app developer is not using default framework animation.
        _StartElementRemovalAnimations(elementsToRemove);
        _StartScreenDimAnimation();
    } 

    // This developer doesn't want the framework’s focused element visibility
    // code/animation to override the custom logic.
    e.ensuredFocusedElementInView = true;
}

// Handle the hiding event.
function onInputPaneHiding(e)
{
    // In this case, the Input Pane is dismissing. The developer can use 
    // this message to start animations.
    if (_ExtraElementsWereRemoved())
    {
        _StartElementAdditionAnimations();
    }

    // Don't use framework scroll- or visibility-related 
    // animations that might conflict with the app's logic.
    e.ensuredFocusedElementInView = true; 
}

Rubriques associées

Pour les développeurs (HTML)
Réponse aux interactions du clavier
Vue d’ensemble du clavier tactile
input type=text element
textarea element
Showing
Hiding
InputPane
Pour les développeurs (XAML)
Réponse aux interactions du clavier
Vue d’ensemble du clavier tactile
TextBox class
TextBlock class
Showing
Hiding
InputPane
Exemples
Entrée : exemple d’entrée de texte du clavier tactile
Exemple de réponse à l’apparition du clavier visuel
Entrée : exemple de clavier tactile (C#/C++ uniquement)

 

 

Afficher:
© 2015 Microsoft