Septième test : Calendrier d’événements

Nous avons débuté le septième test le 4 mai 2016 en allouant une période de 14 jours aux testeurs pour effectuer la tâche. Cette septième expérimentation portait sur le composant calendrier d’événements, dans le dessein d’en vérifier la fiabilité. Voici la page de test : https://labo.raamm.org/lab/tests/cal-events/index.html.

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-7-calendrier-devenements/. 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 le calendrier d’événements 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.

Plus d’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 48 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 réussi à utiliser le composant. Le test a reçu plusieurs commentaires très positifs sur son fonctionnement : «Je ne suis pas une adepte des calendriers virtuels mais présentés de cette façon, j’ai trouvé cela intéressant » et « C’était très facile, il faut dire que vous aviez donné les commandes pour se déplacer ». Le taux de réussite du septième test dépasse les 85%. Les résultats sont excellents pour le composant bien qu’il y ait quelques éléments à corriger.

 

Problématiques et recommandations

Problématique 1 :

Il est difficile de quitter le calendrier pour aller directement au contenu de la page.

Recommandation 1 : (à l’étude)

Permettre de quitter le calendrier avec la touche ESC.

Problématique 2:

Une fois dans la liste des événements du calendrier, il faut retourner au début du calendrier pour y avoir accès.

Recommandation 2 : (à l’étude)

Ajouter des boutons permettant de revenir aux événements dans le calendrier.

Problématique 3 :

Lorsque l’on entre dans le calendrier, ce dernier est nommé comme tableau.

Recommandation 3 : (à l’étude)

Mentionner calendrier plutôt que tableau lorsque l’on navigue sur le composant.

 

Difficultés rencontrés durant l’intégration :

1. On est obligé de mettre un lien <a> dans la liste d’événements même si le calendrier utilise des ancres vers les items de la liste (classe evt-anchor ne semble pas fonctionner)
2. Si on utilise des ancres (classe evt-anchor), on ne peut pas utiliser l’attribut « _blank » dans les liens puisqu’il sera utilisé dans le calendrier aussi. Cela crée des liens internes (ancres) qui s’ouvrent dans une nouvelle page.
3. Lorsqu’on utilise un événement sur plusieurs jours de cette façon :

<p>Du <time datetime= »2016-04-25″>25 avril</time> au <time datetime= »2016-05-01″>1er mai</time></p>

Il y a une erreur dans le calendrier. La journée de départ est décalée d’une journée et dans la dernière journée, on voit apparaitre deux fois le même événement.

 

Corrections (Javascript) :

1- Permettre de quitter le calendrier avec la touche ESC.

       $(document).ready(function(e) {

var toggle = false;

               $(‘#calendar1’).focusin(function(e) {

                   toggle = true;

               });

$(‘#calendar1’).focusout(function(e) {

                   toggle = false;

               });

$(document).keyup(function(e) {

if (e.keyCode == 27 && toggle) { // esc

$(‘#event-list’).focus();

window.location.hash = ‘#event-list’;

}

});

        });

 

2- Supprimer les target= »_blank » puisqu’on utilise des ancres vers la liste des événements.

$( document ).on( « wb-ready.wb-calevt », « .wb-calevt », function( event ) {

updateCalStructure()

});

$( document ).on( « wb-updated.wb-calevt », « .wb-calevt », function( event ) {

updateCalStructure()

});

function updateCalStructure() {

//Supprimer les target= »_blank » car on utilise des ancres

$(‘#calendar1 a’).removeAttr(‘target’);

               };

 

3- Ajouter des boutons permettant de revenir aux événements dans le calendrier.

$( document ).on( « wb-ready.wb-calevt », « .wb-calevt », function( event ) {

               // Ajouter des boutons dans la liste permettant de revenir aux événements dans le calendrier

$(‘.wb-calevt li’).each(function(index, element) {

                   $(this).append(‘<a href= »# » data-evt-target= »‘+$(this).attr(‘id’)+' » class= »btn btn-primary »>Revenir à l\’événement dans le calendrier</a>’);

               });

$(‘a[data-evt-target]’).click(function(e) {

                   $(‘[href= »#’+$(this).attr(‘data-evt-target’)+' »]’).first().closest(‘td’).find(‘a.cal-evt’).attr(‘tabindex’, 0).focus();

               });

});

 

4- Mettre le aria-label « Calendrier » sur le tableau plutôt que le div.

// Mettre le aria-label « Calendrier » sur le tableau plutôt que le div

$(‘#calendar1’).removeAttr(‘aria-label’);

$(‘#calendar1 table’).attr(‘aria-label’, ‘Calendrier’);