Implémentation de l’accessibilité du clavier

Implémentation de l’accessibilité du clavier (HTML)

[ 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 ]

Vous cherchez la version C#/VB/C++/XAML de cette rubrique ? Consultez la section Implémentation de l’accessibilité du clavier (XAML).

De nombreux utilisateurs aveugles ou ayant des problèmes de mobilité utilisent le clavier comme seul moyen de navigation dans l’interface utilisateur de votre application et d’accès à ses fonctionnalités. Si votre application ne fournit pas un accès adéquat au moyen du clavier, ces utilisateurs rencontreront des difficultés lors de l’utilisation de votre application, ou risquent de ne pas pouvoir l’utiliser du tout.

Cette rubrique décrit le balisage et le code que vous devez implémenter pour garantir que votre application Windows Runtime utilisant JavaScript est accessible aux utilisateurs du clavier.

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

Focus clavier initial

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.

Navigation au clavier entre les éléments d’interface utilisateur

Vous devez affecter à 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.

L’exemple suivant inclut l’élément supérieur de l’arborescence dans l’ordre de tabulation. Les informations relatives à l’élément actuel de l’arborescence sont exposées avec l’attribut aria-activedescendant.


<!-- The top tree item must be added to the tab order. -->
<div id="folders" role="tree" aria-label="Folders" tabindex="0"
    aria-activedescendant="n-0" >
...
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
...
</div>

Notez que les balises HTML pouvant être actives, telles que a href="…", input et select, sont par défaut dans l’ordre de tabulation.

Les règles suivantes s’appliquent à l’attribut tabIndex.

  • Les éléments d’interface utilisateur pour lesquels l’élément tabIndex est égal à 0 sont ajoutés à l’ordre de tabulation en fonction de l’ordre du document.
  • Les éléments d’interface utilisateur pour lesquels l’élément tabIndex est supérieur à 0 sont ajoutés à l’ordre de tabulation en fonction de la valeur tabIndex.
  • Les éléments d’interface utilisateur pour lesquels l’élément tabIndex est inférieur à 0 ne sont pas ajoutés à l’ordre de tabulation, mais peuvent être sélectionnés à l’aide du clavier.
Remarque  Ne donnez pas aux éléments de texte (tels que les balises p) une valeur tabIndex supérieure ou égale à 0. En règle générale, un texte n’est pas interactif et ne doit pas laisser penser que le fait d’y définir le focus permet de déclencher une action. Les éléments de texte seront toujours détectés par les technologies d’assistance et lus à haute voix dans les lecteurs d’écran, mais cela repose sur des techniques qui diffèrent de la recherche de ces éléments dans l’ordre de tabulation pratique.
 

Navigation au clavier à l’intérieur d’un élément d’interface utilisateur

Pour les éléments composites, il est important de garantir une navigation interne correcte entre les éléments contenus. Il existe différentes façons d’implémenter une navigation interne pour un élément composite.

Un élément composite peut gérer son enfant actif actuel pour réduire la surcharge que représenterait le fait que tous ses enfants puissent être actifs. Un tel élément composite est inclus dans l’ordre de tabulation, et il gère les événements de navigation au clavier. L’élément composite expose des informations sur l’élément enfant actuellement actif à l’aide de l’attribut aria-activedescendant.


<!-- Custom tree view element. -->
<div id="folders" class="tree" role="tree" aria-label="Folders" tabindex="0"
        aria-activedescendant="n-0" >
    <div id="n-0" class="selected" role="treeitem" aria-expanded="true" 
            onclick="...">
        Libraries</div>
    <div role="group" >
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="…">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="…">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="…">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update aria-activedescendant with the previous node id.
            // Update the class attribute to mark the selected node.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update aria-activedescendant with the next node id.
            // Update the class attribute to mark the selected node.
        }
    });
</script>

Une autre approche consiste à gérer de façon dynamique l’attribut tabIndex pour le nœud. Cette méthode constitue ce qui est considéré comme la fourniture d’un « index itinérant ».


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" >
    <div id="n-0" role="treeitem" aria-expanded="true" tabindex="0">Libraries</div>
    <div role="group" >
        <!-- Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" tabindex="-1">Docs</div>
        <div id="n-0-2" role="treeitem" aria-expanded="false" tabindex="-1">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" tabindex="-1">Pics</div>
    </div>
</div>

<script>
    var folders = document.getElementById('folders');
    // Ensure keyboard navigation/operation with arrow keys.
    folders.addEventListener('keydown', function(e) {
        var itm = e.srcElement;
        if (e.keyCode === Win.Utilities.Key.upArrow) {
            // Update tabindex attributes.
        } else if (e.keyCode === Win.Utilities.Key.downArrow) {
            // Update tabindex attributes.
        }
    });
</script>

Comme illustré dans les deux exemples précédents, la recommandation est d’utiliser les touches de direction comme raccourcis clavier pour naviguer entre les éléments enfants. Si les nœuds de l’arborescence ont des sous-éléments distincts pour la gestion de la fonctionnalité développer–réduire et l’activation des nœuds, vous devez utiliser les touches de direction Flèche gauche et Flèche droite pour fournir au clavier la fonctionnalité développer–réduire.

Activation du clavier

Assurez-vous que les éléments d’interface utilisateur sur lesquels il est possible de cliquer peuvent également être appelés avec le clavier.

Pour les éléments d’interface utilisateur qui peuvent être appelés, implémentez des gestionnaires d’événements de clavier pour les touches Espace et Entrée. Cela permet de compléter la prise en charge de l’accessibilité du clavier de base ; grâce à cela, les utilisateurs peuvent accomplir des scénarios d’application de base via le seul clavier. En d’autres termes, les utilisateurs peuvent atteindre tous les éléments d’interface utilisateur interactifs et activer les fonctionnalités par défaut.


<!-- Custom tree view element. -->
<div id="folders" role="tree" aria-label="Folders" aria-activedescendant="n-0" 
        tabindex="0" >
    <div id="n-0" role="treeitem" aria-expanded="true" onclick="..." >Libraries</div>

    <div role="group" >
        <!—Child tree items: Documents, Music, Pictures ... -->
        <div id="n-0-1" role="treeitem" aria-expanded="false" onclick="...">Docs</div>   
        <div id="n-0-2" role="treeitem" aria-expanded="false" onclick="...">Music</div>
        <div id="n-0-3" role="treeitem" aria-expanded="false" onclick="...">Pics</div>
    </div>
</div>

<script>
    // Ensure keyboard activation
    folders.addEventListener('keydown', function(e) {
        if (e.srcElement && (e.keyCode === Win.Utilities.Key.enter ||
                e.keycode === Win.Utilities.Key.space)) {
            e.srcElement.click(e);
        }
    });
</script>


Raccourcis clavier (facultatifs)

Outre l’implémentation de la navigation au clavier et l’activation du clavier pour votre application, il est recommandé d’implémenter des raccourcis pour les fonctionnalités de votre application. Un raccourci 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 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 d’accès rapide est un raccourci vers une commande d’application. Votre application peut avoir ou non une interface utilisateur qui correspond exactement à la commande. Les touches d’accès rapide sont formées à partir de la touche Ctrl et d’une lettre.

Il est impératif de 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. Vous devez déclarer les touches de raccourci dans le balisage HTML de votre application en utilisant les attributs accesskey et x-ms-acceleratorkey et indiquer les touches de raccourci à l’aide d’info-bulles, de noms accessibles, de descriptions accessibles ou d’autres formes de communication visuelle. Les raccourcis doivent au minimum être bien documentés dans le contenu d’aide de votre application.


<!-- Alt+F sets focus to firstName and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<label for="firstName">First Name</label>
<input id="firstName" type="text" accesskey="F" /> 

<!-- Alt+S invokes the Save button and is exposed by the -->
<!-- AccessKey UIA property.                             -->
<button accesskey="S">Save</button>

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


L’infrastructure prend en charge la fonctionnalité des touches de raccourci pour définir le focus ou appeler des éléments, mais vous devez implémenter des touches de raccourci en JavaScript à l’aide de gestionnaires d’événements de clavier.


<script>
    var sendButton = document.getElementById('sendButton');
    sendButton.addEventListener('keyup', function(e) {
        var itm = e.srcElement;
        if (e.ctrlKey && e.keyCode === 83 ) {
            // Invoke send functionality.
        }
    });
</script>

Vous devez également tenir compte des touches de raccourci en phase de localisation. La localisation des touches de raccourci est particulièrement importante, car la sélection d’une touche de raccourci dépend de l’étiquette définie pour l’élément.


<script>
    var sendButton = document.getElementById('saveButton');
    sendButton.innerHTML = res.getString('saveButton');
    sendButton.setAttribute('accesskey',res.getString('saveButtonAccessKey');
</script>

<!-- resources.resw -->
    <data name="saveButton" xml:space="preserve"><value>Save</value></data> 
    <data name="saveButtonAccessKey" xml:space="preserve"><value>S</value></data>

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

Accessibilité du clavier et Windows Phone

En règle générale, un appareil Windows Phone ne possède pas de clavier matériel dédié. Toutefois, un clavier virtuel (SIP, Soft Input Panel) peut prendre en charge plusieurs scénarios d’accessibilité du clavier. Les lecteurs d’écran peuvent lire une entrée texte à partir du clavier virtuel texte, y compris les annonces de suppressions. Les utilisateurs peuvent savoir à quel endroit se trouvent leurs doigts, car le lecteur d’écran peut détecter la navigation de l’utilisateur parmi les touches, qu’il lit à haute voix une à une. En outre, certains concepts d’accessibilité orientée clavier peuvent être associés à des comportements de technologies d’assistance connexes qui n’utilisent pas du tout de clavier. Par exemple, même si un clavier virtuel ne comprend pas de touche Tabulation, le Narrateur prend en charge un mouvement tactile équivalent à l’appui de la touche Tabulation. Ainsi, le fait de disposer d’un ordre de tabulation pratique dans les contrôles d’une interface utilisateur est un principe d’accessibilité important. L’utilisation des touches de direction pour naviguer entre les parties de contrôles complexes est également prise en charge via les mouvements tactiles du Narrateur. Une fois que le focus a atteint un contrôle qui ne sert pas à entrer du texte, le Narrateur prend en charge un mouvement qui appelle l’action de ce contrôle.

En règle générale, les raccourcis clavier ne concernent pas les applications sur des appareils Windows Phone, car un clavier virtuel ne comporte pas de touche Ctrl ou Alt.

Rubriques associées

Respect des exigences d’accessibilité de base

 

 

Afficher:
© 2017 Microsoft