Propulsé par le RAAMM

Test 8 – Rapport

Huitième test : Aide contextuelle

Nous avons débuté le huitième test le 18 juin 2016 en allouant une période de 10 jours aux testeurs pour effectuer la tâche. Cette huitième expérimentation portait sur un composant créé à partir de deux composants déjà testés dans le dessein d’en vérifier la fiabilité. L’aide contextuelle est constituée d’un accordéon dans une boite de dialogue. Voici la page de test : https://labo.raamm.org/lab/tests/help-modal/index.html.

À la suite de notre premier test, nous avions réalisé que même pour un composant accessible plusieurs utilisateurs avaient besoin d’une aide contextuelle pour comprendre comment l’utiliser. De plus, avec le test sur les onglets nous avions compris que cette aide pouvait être différente pour chaque type d’outil d’adaptation utilisé. Le défi était donc de proposer une façon d’offrir de l’aide contextuelle de façon à ce qu’un utilisateur puisse aller le plus directement possible aux consignes qui le concernait sans avoir à lire tout ce qui touchait aux autres outils d’adaptation. Comme le test sur la boîte de dialogue avait été jugé particulièrement intuitif et qu’il permettait d’offrir de l’information sur demande en l’isolant du reste de la page et que le test sur l’accordéon, également très intuitif, permettait de se concentrer seulement sur l’information pertinente, nous avons pensé combiner ces deux composants pour offrir l’aide contextuelle dont les utilisateurs ont besoin. La facilité d’utilisation de ces deux composants est effectivement un atout important puisque nous ne pouvons offrir de l’aide contextuelle sur l’utilisation de l’aide contextuelle.

Les testeurs sont invités à se rendre sur le site web du laboratoire spécialement conçu à cet effet : https://labo.raamm.org/test/test-8-aide-contextuelle/. Le testeur doit d’abord s’inscrire sur le site. Après avoir rempli la section sur les environnements, il peut commencer à faire des tests. La page du laboratoire nous présente les tests en cours et ceux qui sont terminés. Dans la page du test, l’on retrouve une description de l’élément à examiner, une section d’aide, les objectifs du test, ainsi que le formulaire à remplir pour soumettre un rapport. Un lien Tester l’aide contextuelle mène le testeur vers une autre page où se trouve le composant à tester et la description de tous ces éléments, afin d’en effectuer la vérification.

L’usager teste l’élément dans un ou plusieurs environnements puis remplit le formulaire de commentaires du rapport. Il lui est possible de noter les difficultés rencontrées ou d’émettre un questionnement à même ce formulaire. Lors de la compilation des résultats, notre animateur-coordonnateur contacte au besoin le testeur par téléphone afin d’obtenir des explications supplémentaires sur la problématique rencontrée et de faire les suivis nécessaires.

Une vingtaine d’utilisateurs et d’experts ont testé le composant. Certaines personnes l’ayant expérimenté sur plus d’une plateforme, nous avons reçu un total de 43 rapports de test. Plusieurs recommandations ont pu être formulées à la suite de la compilation finale.

 

Résultats expliqués

Tout d’abord, il est important de noter que les utilisateurs et experts ont trouvé l’utilisation de ce composant simple et efficace. Le test a reçu plusieurs commentaires très positifs sur son fonctionnement : «J’ai particulièrement aimé ce test. J’espère que cette façon de faire se concrétise et devienne réalité rapidement. » et « il permet d’aller directement à l’information souhaitée sans devoir se taper le détail de toutes les autres sections non concernée. ». Le taux de réussite du huitième test dépasse les 80%. Les résultats sont excellents pour le composant.

 

Fonctionnement

  1. Premièrement, il est important de faire la mention du ou des composants qui suivront dans la page. L’utilisateur peut ainsi décider s’il a besoin de consulter l’aide ou non. Exemple : Vous allez rencontrer des onglets. Si vous avez besoin d’aide pour naviguer dans ce composant, activez le bouton suivant.
  2. Par la suite se trouve un bouton clairement identifié qui permet d’ouvrir une boite de dialogue. Exemple : Ouvrir l’aide contextuelle pour le composant des onglets.
  3. Dans la boite de dialogue se trouve d’abord les informations générales qui concerne la navigation sous tous les outils d’accessibilité. Exemple : Aide contextuelle pour l’utilisation des onglets
    Vous devez vous assurer que votre fenêtre du navigateur est affichée en plein écran, car ce type de menu change de disposition automatiquement pour s’adapter aux plus petits écrans des téléphones.
    Voici une description du comportement d’une section à onglets :
    L’onglet sélectionné est mentionné.
    Vous pouvez sélectionner un onglet avec les touches ESPACE ou RETOUR.
    Quand vous activez un onglet, le panneau correspondant s’affiche. Il est possible que vous ayez à passer par-dessus les onglets suivants pour accéder au contenu du panneau que vous avez sélectionné.
  4. Ensuite se trouve un accordéon pour chaque outil avec une particularité de navigation. L’accordéon est utilisé à l’intérieur de la boite de dialogue (aide contextuelle) pour séparer le contenu des différents outils d’accessibilités (NVDA, VoiceOver, JAWS). Exemple :
    • VoiceOver : Vous devez interagir avec le tableau d’onglet avec la commande CTRL + ALT + MAJ + Flèche bas, puis interagir de nouveau avec le groupe pour réussir à lire le contenu du panneau.
    • NVDA : Attention, NVDA ne mentionne pas le début et la fin du panneau d’onglet.
    • JAWS : Le comportement de JAWS 14 et plus est différent selon que vous naviguez dans Firefox ou dans Internet Explorer.
      Dans Firefox, JAWS 14 et plus vous propose la commande INSÈRE + ALT + M pour accéder à l’élément contrôlé. Lorsque cette commande est tapée, JAWS dit « déplacement à l’élément contrôlé » et vous place au début du panneau de l’onglet tout en désactivant le mode interactif (soyez attentif aux signaux sonores).
      Dans Internet Explorer, JAWS 14 et plus passe en mode interactif quand vous sélectionnez un onglet et vous devez désactiver ce mode avec la touche PLUS du pavé numérique avant de pouvoir lire le panneau de l’onglet (soyez attentif aux signaux sonores).
  5. Il est possible de quitter la boite de dialogue à tout moment avec la touche d’échappement et de retourner facilement à la page.

Ce composant permet de transmettre l’information nécéssaire à la navigation de façon simple et efficace. Il permet à l’utilisateur de trouver l’information utile rapidement avec l’accordéon et de retourner à la page sans soucis.

 

Voici un exemple de code pour le bouton permettant d’afficher l’aide contextuelle :

 

<div>

                   <p>

                       Vous allez rencontrer des onglets. Si vous avez besoin d’aide pour naviguer dans ce composant, activez le bouton suivant :

                   </p>

                   

                   <p>

                       <button id= »modal1-btn » type= »button » class= »startModal btn btn-primary » data-target-modal= »#modal1″ tabindex= »0″>

                            Ouvrir l’aide contextuelle pour le composant des onglets <i class= »fa fa-question-circle » aria-hidden= »true »></i>

                       </button>

                   </p>

</div>

 

Voici un exemple de code pour la boite de dialogue (aide contextuelle) :

 

<div id= »accordion-1″ class= »accordion » data-autoclose= »false » data-openfirst= »true » data-openall= »true »>

 

               <h2>

                   <button class= »accordion-title collapse-item collapsed » tabindex= »0″ data-toggle= »collapse » data-target= »#accordion-1-item-3″ id= »accordion-1-item-3-title » aria-expanded= »false » role= »button »>

                   VoiceOver

                   </button>

               </h2>

               <div class= »accordion-content collapse » id= »accordion-1-item-3″ aria-expanded= »false »>

                   <p>

                       VoiceOver : Vous devez interagir avec le tableau d’onglet avec la commande CTRL + ALT + MAJ + Flèche bas, puis interagir de nouveau avec le groupe pour réussir à lire le contenu du panneau.

                   </p>

               </div>

               

               <h2>

                   <button class= »accordion-title collapse-item collapsed » tabindex= »0″ data-toggle= »collapse » data-target= »#accordion-1-item-4″ id= »accordion-1-item-4-title » aria-expanded= »false » role= »button »>

                   NVDA

                   </button>

               </h2>

               <div class= »accordion-content collapse » id= »accordion-1-item-4″ aria-expanded= »false »>

                   <p>

                       Attention, NVDA ne mentionne pas le début et la fin du panneau d’onglet.

                   </p>

               </div>

               

               <h2>

                   <button class= »accordion-title collapse-item collapsed » tabindex= »0″ data-toggle= »collapse » data-target= »#accordion-1-item-2″ id= »accordion-1-item-2-title » aria-expanded= »false » role= »button »>

                   JAWS

                   </button>

               </h2>

               <div class= »accordion-content collapse » id= »accordion-1-item-2″ aria-expanded= »false »>

                   <p>Le comportement de JAWS 14 et plus est différent selon que vous naviguez dans Firefox ou dans Internet Explorer.

</p>

                   <p>Dans Firefox, JAWS 14 et plus vous propose la commande INSÈRE + ALT + M pour accéder à l’élément contrôlé. Lorsque cette commande est tapée, JAWS dit « déplacement à l’élément contrôlé » et vous place au début du panneau de l’onglet tout en désactivant le mode interactif (soyez attentif aux signaux sonores).

                   </p>   

                   <p>Dans Internet Explorer, JAWS 14 et plus passe en mode interactif quand vous sélectionnez un onglet et vous devez désactiver ce mode avec la touche PLUS du pavé numérique avant de pouvoir lire le panneau de l’onglet (soyez attentif aux signaux sonores).

                   </p>

               </div>

               

           </div>

      

           <p><button type= »button » class= »closeModal btn btn-danger »>Fermer la boite de dialogue</button></p>

      

</div>